组件工坊：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.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr官方文档
工坊订单
请在一行发布说明里，用合适的 HTML 文本元素分别标出版本号、日期、新快捷键和被移除的功能。
这里是 26 个在句子内部给特定词语附加含义的 HTML 元素，比如强调、代码、键盘按键、引用、上标、日期等。
它们大多是留在行内的内联元素，所以混在 rx.el.p 或 rx.text 里使用。浏览器会给出默认外观（加粗、斜体、等宽），搜索引擎和屏幕阅读器则会读取它们的含义。
Press Ctrl + S to save your work.
rx.el.p(
"Press ",
rx.el.kbd("Ctrl"),
" + ",
rx.el.kbd("S"),
" to ",
rx.el.strong("save"),
" your work.",
)文本元素几乎没有专属属性，靠通用属性和样式来处理。试着改改 mark 的背景色和 bdo 的 dir（文字方向）。
试着改属性
Reflex | Reflex | Reflex
word
mark_color
direction
size
rx.el.p(
rx.el.mark("Reflex", background="yellow"),
" | ",
rx.el.bdo("Reflex", dir="rtl"),
" | ",
rx.el.small("Reflex"),
font_size="18px",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
value (data) | 字符串·数字 | 无 | 藏在人读文字背后、供机器读取的值 |
date_time (time) | "2026-05-01", "09:00" … | 无 | 日期·时间的标准格式 |
cite (q) | URL | 无 | 引用出处地址（页面上不显示） |
title (abbr, dfn) | 字符串 | 无 | 缩写的全称，鼠标悬停时显示 |
dir (bdo, bdi) | "ltr" "rtl" | 跟随父元素 | 文字方向 |
| 通用属性·样式 | id class_name color … | 无 | 所有文本元素都可以用 |
有些元素外观相同、含义不同。strong 表示重要，b 只是加粗；em 表示语气重读，i 表示另一种语气（术语、外语）。
u 是需要用下划线标出的批注，s 是不再正确的内容，mark 是荧光笔标记，small 是附加的小字说明。
strong important · b just bold
em stressed · i different voice
u annotated · s no longer true
mark highlighted · small side note
rx.el.div(
rx.el.p(rx.el.strong("strong"), " important · ", rx.el.b("b"), " just bold"),
rx.el.p(rx.el.em("em"), " stressed · ", rx.el.i("i"), " different voice"),
rx.el.p(rx.el.u("u"), " annotated · ", rx.el.s("s"), " no longer true"),
rx.el.p(rx.el.mark("mark"), " highlighted · ", rx.el.small("small"), " side note"),
display="flex",
flex_direction="column",
gap="4px",
)code 是代码片段，kbd 是用户要按的键，samp 是程序给出的输出。三者都用等宽字体显示。
Run reflex run in the terminal.
Then press Ctrl + C to stop.
The terminal prints: App running at http://localhost:3000
rx.el.div(
rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
display="flex",
flex_direction="column",
gap="4px",
)q 是短引用，浏览器会自动加上引号。cite 属性写出处地址，cite 元素写作品标题。
dfn 是在此处下定义的术语，abbr 是缩写，在 title 里写全称。
As The Zen of Python says: Simple is better than complex.
A component is a reusable piece of UI.
rx.el.div(
rx.el.p(
"As ",
rx.el.cite("The Zen of Python"),
" says: ",
rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
),
rx.el.p(
"A ",
rx.el.dfn("component"),
" is a reusable piece of ",
rx.el.abbr("UI", title="User Interface"),
".",
),
display="flex",
flex_direction="column",
gap="4px",
)sub·sup 用于化学式和指数。br 在当前位置换行，wbr 表示“这里可以换行”。
下面的盒子很窄，长单词会在 wbr 的位置断开。
Water is H2O. Energy is mc2.
Line one
Line two after br
Super
rx.el.div(
rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
rx.el.p("Line one", rx.el.br(), "Line two after br"),
rx.el.p(
"Super",
rx.el.wbr(),
"califragilistic",
rx.el.wbr(),
"expialidocious",
width="120px",
padding="6px",
border="1px dashed gray",
),
display="flex",
flex_direction="column",
gap="8px",
)data 和 time 在页面上显示人读的文字，在属性里藏着程序读取的标准值。外观和普通文字一样。
Price: $12
Opens on
Starts at
rx.el.div(
rx.el.p("Price: ", rx.el.data("$12", value=12)),
rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
display="flex",
flex_direction="column",
gap="4px",
)bdi 把方向未知的文字（如用户名）与周围隔离开，即使混入从右往左书写的文字，顺序也不会乱。
bdo 强制指定方向。ruby·rt 用来在汉字上方标注读音，rp 是只在不支持 ruby 的浏览器中显示的括号。
Winner: إيان - 3 points
bdo rtl: Hello
漢字
rx.el.div(
rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
rx.el.p(
rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
font_size="24px",
),
display="flex",
flex_direction="column",
gap="6px",
)版本号用 strong，日期用 time，快捷键用 kbd，被移除的用 s，新增的用 mark，补充说明用 small 和 abbr。
v2.1 · released
Search now opens with Ctrl + K. Slash key New shortcut.
Requires API v3.
rx.el.div(
rx.el.p(
rx.el.strong("v2.1"),
" · released ",
rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
),
rx.el.p(
"Search now opens with ",
rx.el.kbd("Ctrl"),
" + ",
rx.el.kbd("K"),
". ",
rx.el.s("Slash key"),
" ",
rx.el.mark("New shortcut"),
".",
),
rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
padding="12px 16px",
border_left=f"4px solid {rx.color('indigo', 9)}",
background=rx.color("gray", 2),
display="flex",
flex_direction="column",
gap="4px",
)工坊笔记
文本元素给句子中的词语附加含义，和文字一起混在 rx.el.p 里使用。
strong/b、em/i 外观相同但含义不同。有语义时用 strong·em。
code 是代码，kbd 是要按的键，samp 是程序输出。
专属属性只有 data 的 value、time 的 date_time、q 的 cite 三个，其余靠通用属性和样式。
bdi·bdo 管文字方向，ruby·rt·rp 管读音标注，wbr 是可以换行的位置。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。