组件工坊：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.container官方文档
工坊订单
别让文字在宽屏显示器上无限向两侧铺开，请把正文宽度限制在便于阅读的范围内。
rx.container 限制内部内容的最大宽度，把两侧多出的部分留作空白，让内容居中。屏幕比最大宽度窄时，内容也跟着变窄，非常适合响应式页面。通常用它包住整页的正文。
rx.box(
rx.container(
rx.card("This content is at most 448px wide.", width="100%"),
size="1",
),
background_color="var(--gray-3)",
width="100%",
)灰色底是外部区域，卡片在 Container 内部。这个预览框比较窄，所以 size 3·4 看起来像是填满了整个框。
试着改属性
size
padding
rx.box(
rx.container(
rx.card("Page content", width="100%"),
size="1",
padding="16px",
),
background_color="var(--gray-3)",
width="100%",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1"(448px) "2"(688px) "3"(880px) "4"(1136px) | "3" | 内部内容的最大宽度 |
padding | CSS 长度 | "16px" | 内边距。由 Reflex 的 create 默认加上 |
stack_children_full_width | True / False | False | 让内部的 vstack·hstack 及其中的输入框等子元素宽度为 100% |
size 可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。padding 和 stack_children_full_width 不是 Radix 属性，而是已安装的 0.10 的 rx.container 额外提供的参数。
这是官方文档的示例。每个 Container 在外部宽度内只扩展到自己的最大宽度，并居中摆放。
rx.box(
rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
background_color="var(--gray-3)",
width="100%",
)Stack 默认把子元素设为 align="start"，所以输入框只占自己的宽度。设置 stack_children_full_width=True 后，Container 里的 Stack 以及 Stack 直接下级的 div·input·select·textarea·table 子元素都会变成 100% 宽度。按钮（button 元素）不在此列。左边是默认，右边是打开后的效果。
rx.flex(
rx.container(
rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
size="1",
background_color="var(--gray-3)",
),
rx.container(
rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
size="1",
stack_children_full_width=True,
background_color="var(--gray-3)",
),
spacing="4",
width="100%",
)想在手机上窄一点、在宽屏上宽一点时，给 size 传入 rx.breakpoints。
rx.box(
rx.container(
rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
size=rx.breakpoints(initial="1", md="2", lg="3"),
),
background_color="var(--gray-3)",
width="100%",
)用 size="2"（最大 688px）包住一篇文章。即使在宽屏显示器上，一行也不会太长，读起来很舒服。
Posted on Monday
A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.
The container keeps this column narrow on wide screens.
rx.box(
rx.container(
rx.vstack(
rx.heading("Notes from the workshop", size="6"),
rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
rx.text(
"A long line of text is hard to read. "
"Keeping the column narrow helps the eye find the next line.",
),
rx.text("The container keeps this column narrow on wide screens."),
spacing="3",
),
size="2",
padding_y="24px",
),
background_color="var(--gray-2)",
width="100%",
)工坊笔记
rx.container 限制内容的最大宽度并居中，用来包住页面正文。
size "1"~"4" = 448·688·880·1136px。默认是 "3"。
Reflex 默认加上 padding="16px"，需要时可以改。
stack_children_full_width=True 时，内部的 Stack 和输入框等子元素宽度为 100%（按钮除外）。
可以像 size=rx.breakpoints(initial="1", lg="3") 这样按屏幕宽度改变。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。