组件工坊：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.separator 在内容之间画一条细线，把内容分成几块。它是视觉上的分隔，必要时也能告诉屏幕阅读器“这里分开了”。rx.divider 是同一组件的另一个名字，用哪个都行。
rx.flex(
rx.card("Section 1"),
rx.separator(),
rx.card("Section 2"),
spacing="4",
direction="column",
align="center",
)想看竖线，就把 orientation 改成 vertical，把外层 direction 改成 row。竖线的长度以父元素的高度（这里是 10rem）为基准。
试着改属性
size
orientation
direction
color
rx.flex(
rx.card("Section 1"),
rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
rx.card("Section 2"),
direction="column",
spacing="4",
align="center",
width="100%",
height="10rem",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1"(16px) "2"(32px) "3"(64px) "4"(100%) | "4" | 线的长度 |
orientation | "horizontal" "vertical" | "horizontal" | 横线·竖线 |
color_scheme | Radix 颜色名 | "gray" | 线的颜色 |
decorative | True / False | True | 为 True 时只是装饰，会从无障碍树中移除。若是有含义的分隔就设为 False |
size 和 orientation 可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。Radix Themes 的默认尺寸是 "1"，但已安装的 0.10 的 rx.separator 把默认值设为 "4"，所以什么都不传时会撑满父元素。
size="4" 会撑满父元素的宽度（竖线则是高度）。把 CSS width 或 height 设为 "100%" 效果一样，但 size 不论方向如何都表现一致。"1"~"3" 是固定长度。
rx.flex(
rx.separator(size="1"),
rx.separator(size="2"),
rx.separator(size="3"),
rx.separator(size="4"),
direction="column",
spacing="4",
width="100%",
)orientation="vertical" 时变成竖线。竖线要求父元素有高度，才能用 size="4" 拉长。这里像官方文档一样使用了 rx.divider 这个名字。
rx.flex(
rx.card("Section 1"),
rx.divider(orientation="vertical", size="4"),
rx.card("Section 2"),
spacing="4",
width="100%",
height="10vh",
)像菜单链接之间这样在同一行里分隔时，size="1" 的短竖线最合适。给外层 Flex 设置 align="center"，线就会位于文字的垂直中间。
rx.flex(
rx.link("Home", href="#"),
rx.separator(orientation="vertical", size="1"),
rx.link("Blog", href="#"),
rx.separator(orientation="vertical", size="1"),
rx.link("About", href="#"),
spacing="3",
align="center",
)在姓名部分和联系方式部分之间放一条横线，再用 margin_y 在上下留出喘息的空间。
Jamie Kim
Potter
jamie@example.com
555-0100
rx.card(
rx.flex(
rx.avatar(fallback="JK"),
rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
spacing="3",
align="center",
),
rx.separator(margin_y="12px"),
rx.vstack(
rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
spacing="2",
),
width="260px",
)工坊笔记
rx.separator（= rx.divider）在内容之间画线。
size "1"~"4" = 16·32·64px·100%。0.10 的默认值是 "4"（撑满）。
orientation="vertical" 时是竖线。父元素有高度才能拉长。
用 color_scheme 设颜色，用 decorative=False 表明这是有含义的分隔。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。