组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
表单
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
数据展示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
展开与切换
·
Tabs
·
Accordion
·
Segmented Control
浮层
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
动态渲染
·
Cond
·
Match
·
Foreach
·
Auto Scroll
媒体
·
Image
·
Audio
·
Video
表格与数据网格
·
Table
·
Data Table
·
Data Editor
图表
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
图表部件
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
其他图表库
·
Plotly
·
Pyplot
HTML 元素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
其他工具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.text.strong官方文档
工坊订单
请让固件更新说明里“指示灯变绿之前不要拔掉电源”这句话一定能被读到。
rx.text.strong 在句子里标出“这部分很重要”。它渲染为 HTML <strong> 标签并显示为粗体。适合警告、截止日期、金额这类不能漏看的内容。
The most important thing to remember is, stay positive.
rx.text("The most important thing to remember is, ", rx.text.strong("stay positive"), ".")Strong 没有大小、颜色之类的外观属性。它沿用外层 rx.text 的大小和颜色，只是加粗。因此本页没有属性实验台，而是放了由 State 驱动的示例。
| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
| 子元素 | 字符串、State 值、组件 | 必填 | 重要部分的文字 |
此外还接受 id、title、lang 等 HTML 通用属性和基础事件。
两行看起来一样粗。但 rx.text.strong 是 <strong> 标签，“重要”这层含义会保留在 HTML 里；而 weight="bold" 只是外观变粗。屏幕阅读器和搜索引擎读得懂这层含义。单纯出于设计需要加粗时用 weight，因为内容重要而加粗时选 Strong。
Semantic: Do not unplug during the update.
Visual only: Do not unplug during the update.
rx.flex(
rx.text("Semantic: ", rx.text.strong("Do not unplug during the update"), "."),
rx.text("Visual only: ", rx.text("Do not unplug during the update", weight="bold", as_="span"), "."),
direction="column",
spacing="3",
)Strong 部分同样直接使用外层文字的大小和颜色。
Small gray text with strong part.
Large crimson text with strong part.
rx.flex(
rx.text("Small gray text with ", rx.text.strong("strong part"), ".", size="2", color_scheme="gray"),
rx.text("Large crimson text with ", rx.text.strong("strong part"), ".", size="5", color_scheme="crimson"),
direction="column",
spacing="3",
)在子元素里放 State 值，值变化时强调的部分也会变。选择配送方式后，加粗显示的送达时间会随之改变。
Your order arrives in 3 days.
class StrongShippingState(rx.State):
option: str = "Standard"
@rx.var
def days(self) -> str:
return {"Express": "1 day", "Standard": "3 days", "Economy": "7 days"}[self.option]
@rx.event
def choose(self, value: str):
self.option = value
rx.flex(
rx.flex(
rx.button("Express", size="1", variant=rx.cond(StrongShippingState.option == "Express", "solid", "soft"),
on_click=StrongShippingState.choose("Express")),
rx.button("Standard", size="1", variant=rx.cond(StrongShippingState.option == "Standard", "solid", "soft"),
on_click=StrongShippingState.choose("Standard")),
rx.button("Economy", size="1", variant=rx.cond(StrongShippingState.option == "Economy", "solid", "soft"),
on_click=StrongShippingState.choose("Economy")),
spacing="2",
),
rx.text("Your order arrives in ", rx.text.strong(StrongShippingState.days), ".", size="4"),
direction="column",
align="start",
spacing="3",
)说明文字整体保持普通字重，只用 rx.text.strong 包住必须遵守的那一句。一段话里强调太多，反而什么都不显眼了。
Keep the device connected. Do not unplug it until the light turns green, or the update will fail.
rx.callout.root(
rx.callout.icon(rx.icon("triangle-alert")),
rx.callout.text(
"Keep the device connected. ",
rx.text.strong("Do not unplug it until the light turns green"),
", or the update will fail.",
),
color_scheme="amber",
)工坊笔记
rx.text.strong("…") 表示重要部分（<strong>），作为子元素放进 rx.text。
没有外观属性，在外层文字的大小和颜色基础上只加粗。
含义重要用 Strong，只是设计上加粗用 weight="bold"。
强调要节制，一段话里一处左右就够了。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。