组件工坊：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.section官方文档
工坊订单
请把介绍页按“功能”“价格”这样分成几大块，每块上下留出充足的空白。
rx.section 表示页面内容中的一个区块。它渲染为 HTML <section> 元素，默认带有上下内边距。它首先是一个表达语义的组件，用来把彼此相关的内容（比如一个标题和它下面的正文）归成一块。
This is the first content section
This is the second content section
rx.box(
rx.section(
rx.heading("First", as_="h2", size="4"),
rx.text("This is the first content section"),
padding_x="12px",
background_color="var(--gray-2)",
),
rx.section(
rx.heading("Second", as_="h2", size="4"),
rx.text("This is the second content section"),
padding_x="12px",
background_color="var(--gray-3)",
),
width="100%",
)Section 只有 size 一个属性，用来决定上下留白的大小。注意看虚线之间的空白如何变化。
试着改属性
Vertical padding comes from the size prop.
size
rx.box(
rx.section(
rx.heading("Features", as_="h2", size="4"),
rx.text("Vertical padding comes from the size prop."),
size="2",
padding_x="12px",
background_color="var(--accent-2)",
border_top="1px dashed var(--accent-8)",
border_bottom="1px dashed var(--accent-8)",
),
width="100%",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1"(24px) "2"(40px) "3"(64px) | "2" | 上下内边距 |
padding_x 等 CSS | CSS 长度 | 无 | 左右默认没有留白 |
size 可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。Radix Themes 还有 size="4"（80px），但已安装的 0.10 的 rx.section 只接受 "1"~"3"。
把只有尺寸不同的三个 Section 并排放置。文字相同，只有上下留白不同。
size 1
size 2
size 3
rx.flex(
rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
spacing="3",
align="start",
width="100%",
)想在手机上减少留白、在宽屏上增加留白时，给 size 传入 rx.breakpoints。
Small padding on phones, more on wide screens
rx.section(
rx.text("Small padding on phones, more on wide screens"),
size=rx.breakpoints(initial="1", md="3"),
padding_x="12px",
background_color="var(--gray-3)",
width="100%",
)rx.box 是没有语义的 <div>，而 rx.section 是带有“从这里开始是一个区块”含义的 <section>。屏幕阅读器和搜索引擎会把这种区分当作文档结构来读取。每个区块用 rx.heading 加上标题，结构会更清晰。常见的写法是用 rx.container 限定整页宽度，再在里面用 Section 分区。
用 Container 限定正文宽度，把“功能”和“价格”各自分成一个 Section。中间的 rx.separator() 标出区块的分界。
Pure Python, from the front end to the back end.
Free to start. Pay when your app grows.
rx.container(
rx.section(
rx.heading("Features", as_="h2", size="5"),
rx.text("Pure Python, from the front end to the back end."),
size="2",
),
rx.separator(),
rx.section(
rx.heading("Pricing", as_="h2", size="5"),
rx.text("Free to start. Pay when your app grows."),
size="2",
),
size="2",
width="100%",
)工坊笔记
rx.section 是 <section> 元素，是把相关内容归为一个区块的语义组件。
size "1"~"3" 对应上下留白 24·40·64px。默认是 "2"。
左右没有留白，需要用 padding_x 另行设置。
每个区块用 rx.heading 加上标题。
用 rx.container 限定宽度，在里面用 rx.section 分区。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。