ReflexKR

组件工坊：Reflex 组件库 100 例

课程概览

布局

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

排版

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

组件工坊：Reflex 组件库 100 例

HTML 元素

HTML Layout

rx.el.addressrx.el.articlerx.el.asiderx.el.blockquoterx.el.bodyrx.el.ddrx.el.del_rx.el.detailsrx.el.dialogrx.el.dlrx.el.dtrx.el.figcaptionrx.el.footerrx.el.h1 ~ h6rx.el.headrx.el.headerrx.el.hrrx.el.htmlrx.el.lirx.el.linkrx.el.mainrx.el.navrx.el.noscriptrx.el.olrx.el.portalrx.el.prerx.el.scriptrx.el.sectionrx.el.templaterx.el.titlerx.el.ul

官方文档

工坊订单

请把一篇店铺新闻用有语义的 HTML 结构排好：页头、正文、旁注小贴士、可折叠的问答，以及带联系方式的页脚。

这些 HTML 元素负责文档的结构与布局。其中有给区域命名的 header·main·footer，标题 h1~h6，列表 ul·ol·dl，还有可展开的 details。用 div 也能做出同样的外观，但使用有语义的元素，屏幕阅读器和搜索引擎就能理解页面结构。

Opening hours

Mon to Fri, 9 am to 6 pm.

rx.el.article(
    rx.el.header(rx.el.h2("Opening hours", font_weight="bold")),
    rx.el.p("Mon to Fri, 9 am to 6 pm."),
    rx.el.footer("Updated today", font_size="12px", color="gray"),
    padding="12px",
    border="1px solid gray",
    border_radius="8px",
)

试着改属性

结构元素大多只有通用属性。来动一动有专属属性的 ol（reversed）和 details（open）。本站的 Tailwind preflight 会去掉列表符号，所以用 CSS 的 list_style_type 把符号找回来。

试着改属性

Mix
Bake
Serve

More info

Shown when the details element is open.

reversed

marker

summary

open

rx.el.div(
    rx.el.ol(
        rx.el.li("Mix"),
        rx.el.li("Bake"),
        rx.el.li("Serve"),
        reversed=False,
        list_style_type="decimal",
        padding_left="2em",
    ),
    rx.el.details(
        rx.el.summary("More info", cursor="pointer"),
        rx.el.p("Shown when the details element is open."),
        open=False,
    ),
)

打开 reversed，编号就会倒数。open 让 details 一开始就是展开的。

属性	取值	默认值	用途
`start` (ol)	整数	`1`	起始编号
`reversed` (ol)	`True` / `False`	`False`	倒序编号
`type` (ol)	`"1"` `"a"` `"A"` `"i"` `"I"`	`"1"`	编号样式。有 preflight 时由 CSS `list_style_type` 代替
`open` (details, dialog)	`True` / `False`	`False`	展开·打开
`cite` (blockquote, del_)	URL	无	引用·修改的出处
`date_time` (del_)	日期字符串	无	删除的时间
`rel` `href` … (link)	字符串	无	连接外部资源（用于文档头部）
`async_` `defer` `src` … (script)	bool·字符串	无	script 标签（见 Script 页面）

页面骨架

header 是页头，nav 是导航菜单，main 是主体内容，article 是单独拿出来也能看懂的文章，aside 是旁注，section 是主题分组，footer 是页脚，address 是联系方式。它们都是没有样式的盒子，布局用 display="grid"·"flex" 这类 CSS 来决定。

Workshop

Post title

The main story goes here.

A themed section of the page.

rx.el.div(
    rx.el.header(
        rx.el.strong("Workshop"),
        rx.el.nav(rx.el.span("Home"), rx.el.span("Parts"), rx.el.span("About"), display="flex", gap="12px"),
        display="flex",
        justify_content="space-between",
        padding="8px",
        background=rx.color("indigo", 3),
    ),
    rx.el.main(
        rx.el.article(rx.el.h3("Post title", font_weight="bold"), rx.el.p("The main story goes here.")),
        rx.el.aside("Related links", padding="8px", background=rx.color("gray", 3)),
        display="grid",
        grid_template_columns="2fr 1fr",
        gap="12px",
        padding="8px",
    ),
    rx.el.section(rx.el.p("A themed section of the page."), padding="8px", border_top="1px dashed gray"),
    rx.el.footer(rx.el.address("hello@example.com"), padding="8px", font_size="13px", color="gray"),
    border="1px solid gray",
    border_radius="8px",
    overflow="hidden",
)

标题、分隔线、引用、预格式化文本

因为 preflight，h1 和 h3 显示成和正文一样大。标题表示的是语义，大小另用 font_size 指定。 hr 是主题转换的分隔线，blockquote 是长引用（出处写在 cite），pre 是原样保留空格和换行的文本。 del 元素和 Python 的保留字冲突，在 Reflex 里写成 rx.el.del_（官方文档的列表里写作 rx.el.Del）。与之配对的 rx.el.ins 表示新插入的文字。

h1 with no style

h3 with no style

h2 with style

Make it work, make it right, make it fast.

def hello():
    print('hi')

Price: ~~$20~~ $15

rx.el.div(
    rx.el.h1("h1 with no style"),
    rx.el.h3("h3 with no style"),
    rx.el.h2("h2 with style", font_size="24px", font_weight="bold"),
    rx.el.hr(margin_y="8px"),
    rx.el.blockquote(
        "Make it work, make it right, make it fast.",
        cite="https://wiki.c2.com/?MakeItWorkMakeItRightMakeItFast",
        border_left="4px solid gray",
        padding_left="12px",
        font_style="italic",
    ),
    rx.el.pre("def hello():\n    print('hi')", padding="8px", background=rx.color("gray", 3)),
    rx.el.p("Price: ", rx.el.del_("$20", date_time="2026-10-01"), " ", rx.el.ins("$15")),
)

列表

ul 是无序列表，ol 是编号列表，列表项是 li。dl 是描述列表，成对排列术语（dt）和说明（dd）。

Apples
Pears

Third
Fourth

Box: A container with no meaning.
Flex: A row or column of children.

rx.el.div(
    rx.el.ul(rx.el.li("Apples"), rx.el.li("Pears"), list_style_type="disc", padding_left="1.5em"),
    rx.el.ol(rx.el.li("Third"), rx.el.li("Fourth"), start=3, list_style_type="decimal", padding_left="1.5em"),
    rx.el.dl(
        rx.el.dt("Box", font_weight="bold"),
        rx.el.dd("A container with no meaning.", margin_left="1.5em"),
        rx.el.dt("Flex", font_weight="bold"),
        rx.el.dd("A row or column of children.", margin_left="1.5em"),
    ),
    display="flex",
    gap="24px",
    flex_wrap="wrap",
)

展开与对话框

details 里的第一个 summary 就是标题，点击后由浏览器自己展开和收起，不需要 State。 dialog 用 open 属性打开。这样打开的是不遮挡背后内容的非模态窗口；要覆盖整个屏幕的模态对话框，用 rx.dialog 更简单。

What is details?

A box the browser opens and closes by itself.

class HtmlLayoutDialogState(rx.State):
    is_open: bool = False

    @rx.event
    def toggle(self):
        self.is_open = not self.is_open


rx.el.div(
    rx.el.details(
        rx.el.summary("What is details?", cursor="pointer"),
        rx.el.p("A box the browser opens and closes by itself."),
    ),
    rx.el.button(
        "Toggle dialog",
        on_click=HtmlLayoutDialogState.toggle,
        padding="4px 12px",
        border="1px solid gray",
        border_radius="6px",
        margin_top="12px",
    ),
    rx.el.dialog(
        rx.el.p("A non-modal dialog, opened by the open prop."),
        open=HtmlLayoutDialogState.is_open,
        padding="12px",
        border="1px solid gray",
        border_radius="8px",
        top="40px",
    ),
    position="relative",
    min_height="150px",
)

插图与说明

figcaption 在 figure 中为图片、表格、代码等内容添加说明。

Strawberries — Fig. 1 - Fresh strawberries

rx.el.figure(
    rx.el.img(src="https://picsum.photos/id/1080/320/160", alt="Strawberries", border_radius="6px"),
    rx.el.figcaption("Fig. 1 - Fresh strawberries", font_size="13px", color="gray", margin_top="4px"),
    width="320px",
)

不可见元素与文档级元素

template 里的内容不会渲染到页面上，只作为可复制使用的模板保留。noscript 只在关闭了 JavaScript 的浏览器中显示。Reflex 应用靠 JavaScript 运行，所以这里看不到它。

Only this line is visible.

rx.el.div(
    rx.el.p("Only this line is visible."),
    # rx.el.template(...) also keeps its content off the page, but React cannot
    # hydrate children inside <template>, so it is left out of this live example.
    rx.el.noscript("Please turn on JavaScript."),
)

html、head、body、title、link、script、portal 是整个文档或文档头部的元素。Reflex 已经替你搭好了这个框架，所以在页面里几乎用不到，这里也只以代码展示。 React 19 会把正文里的 title·link 提升到文档头部，如果在页面里渲染它们，本站的标签页标题就会被改掉。

# Document-level and head elements: Reflex already renders these, so pages rarely use them
rx.el.html(...)    # manifest attribute (removed in HTML5)
rx.el.head(...)
rx.el.body(...)
rx.el.title("Page title")   # set page titles with @rx.page(title=...)
rx.el.link(rel="stylesheet", href="/styles.css")   # add stylesheets with rx.App(stylesheets=[...])
rx.el.script(src="/my-script.js")   # use rx.script for scripts (see the Script page)
rx.el.portal(...)  # experimental element that never became a standard

完成订单

整篇文章用 article，标题和日期用 header，正文用 section，小贴士用 aside，问答用 details，联系方式是 footer 里的 address。

Spring menu is here

Mar 3, 2026

Three new dishes join the menu this week.

Spring rolls
Pea soup
Lemon tart

Do you have vegan options?

Yes, the soup and rolls are vegan.

rx.el.article(
    rx.el.header(
        rx.el.h1("Spring menu is here", font_size="22px", font_weight="bold"),
        rx.el.p(rx.el.time("Mar 3, 2026", date_time="2026-03-03"), font_size="13px", color="gray"),
    ),
    rx.el.section(
        rx.el.p("Three new dishes join the menu this week."),
        rx.el.ul(rx.el.li("Spring rolls"), rx.el.li("Pea soup"), rx.el.li("Lemon tart"), list_style_type="disc", padding_left="1.5em"),
        margin_y="8px",
    ),
    rx.el.aside("Tip: book a table early.", padding="8px", background=rx.color("amber", 3), border_radius="6px"),
    rx.el.details(
        rx.el.summary("Do you have vegan options?", cursor="pointer", font_weight="600"),
        rx.el.p("Yes, the soup and rolls are vegan."),
        margin_y="8px",
    ),
    rx.el.hr(),
    rx.el.footer(rx.el.address("12 Market St · hello@example.com"), font_size="13px", color="gray", margin_top="8px"),
    padding="16px",
    border="1px solid gray",
    border_radius="10px",
    max_width="420px",
)

工坊笔记

header·nav·main·article·section·aside·footer 给区域命名，布局交给 CSS。
h1~h6 只表示语义。在 preflight 下用 font_size 定大小。
ul·ol·li，dl·dt·dd。列表符号用 list_style_type，ol 有 start·reversed。
details + summary 无需 State 就能展开。dialog 的 open 是非模态，模态用 rx.dialog。
del 写作 rx.el.del_。html·head·body·title·link 由 Reflex 负责，页面里不用。

← 上一课

HTML 元素 · HTML Text

下一课 →

HTML 元素 · HTML Forms

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex