组件工坊：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.spacer官方文档
工坊订单
请在页头左侧放 logo，右端放登录按钮。
rx.spacer 是在 Flex 里占满全部剩余空间的空格子。把它夹在子元素之间，就会把两侧的子元素推开，适合让某些东西靠左、某些东西贴在右端。有多个 Spacer 时，它们平分剩余空间。
Example
Example
Example
rx.flex(
rx.center(rx.text("Example"), bg="lightblue", padding="4px 8px"),
rx.spacer(),
rx.center(rx.text("Example"), bg="lightgreen", padding="4px 8px"),
rx.spacer(),
rx.center(rx.text("Example"), bg="salmon", padding="4px 8px"),
width="100%",
)Spacer 本身没有外观，所以这里不用实验台，而是看看它夹在不同位置时结果如何变化。在下面选择放 Spacer 的位置。像 start + end 这样两端各放一个，内容就会聚到中间。
class SpacerPlaceState(rx.State):
place: str = "middle"
@rx.event
def set_place(self, value: str):
self.place = value
rx.vstack(
rx.select(
["none", "start", "middle", "end", "start + end"],
value=SpacerPlaceState.place,
on_change=SpacerPlaceState.set_place,
),
rx.flex(
rx.cond((SpacerPlaceState.place == "start") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
rx.badge("A", size="3"),
rx.cond(SpacerPlaceState.place == "middle", rx.spacer()),
rx.badge("B", size="3"),
rx.cond((SpacerPlaceState.place == "end") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
spacing="2",
width="100%",
padding="8px",
border="1px dashed var(--gray-7)",
),
width="100%",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
（样式）flex | 1 | 由 Reflex 加上 | 占据剩余空间。有多个时平分 |
（样式）align_self justify_self | "stretch" | 由 Reflex 加上 | 在交叉轴上也会拉伸 |
direction align justify wrap spacing as_child | 与 Flex 相同 | 无 | 因为基于 Flex 而接受这些属性，但它只是个空格子，几乎用不上 |
只有当父元素属于 Flex 一类（rx.flex、rx.hstack、rx.vstack、rx.stack）时，Spacer 才会占据空间。在 rx.box 里它什么也不做。
stack、vstack、hstack 都由 Flex 构成，可以直接使用 Spacer。在纵向（vstack）中它分配的是高度。左侧菜单借助 Spacer 把 'Log out' 推到了最底部。纵向时，父元素必须有高度，才会产生剩余空间。
Menu
Home
Orders
Log out
rx.flex(
rx.vstack(
rx.text("Menu", weight="bold"),
rx.text("Home"),
rx.text("Orders"),
rx.spacer(),
rx.text("Log out", color="var(--red-11)"),
height="14rem",
padding="12px",
background_color="var(--gray-3)",
width="140px",
),
rx.hstack(
rx.badge("Left"),
rx.spacer(),
rx.badge("Right"),
width="100%",
padding="12px",
background_color="var(--gray-3)",
),
spacing="4",
width="100%",
)把子元素撑开到两端，用 justify="between" 也能做到。不过 between 会把所有子元素之间均匀撑开，而 Spacer 只撑开它所在的位置。上面只让 A 靠左、B·C 贴在右侧；下面用 between 把三者均匀撑开。
rx.vstack(
rx.flex(rx.badge("A"), rx.spacer(), rx.badge("B"), rx.badge("C"), spacing="2", width="100%"),
rx.flex(rx.badge("A"), rx.badge("B"), rx.badge("C"), justify="between", width="100%"),
width="100%",
spacing="4",
)在 logo 组和两个按钮之间放一个 Spacer，logo 就靠左，按钮们就贴在右端。
Workshop
rx.hstack(
rx.hstack(rx.icon("hammer"), rx.text("Workshop", weight="bold"), align="center"),
rx.spacer(),
rx.button("Log in", variant="soft"),
rx.button("Sign up"),
align="center",
width="100%",
padding="12px 16px",
border_bottom="1px solid var(--gray-6)",
)工坊笔记
rx.spacer() 是占据 Flex 内剩余空间的空格子。
把所在位置两侧的元素推开。有多个时平分空间。
只在 flex·hstack·vstack·stack 里生效。在 vstack 中需要父元素有高度。
要均匀撑开所有子元素用 justify="between"，只撑开一处用 spacer。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。