组件工坊：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.fragment官方文档
工坊订单
卡片必须直接放进 Grid 的格子里，但我想根据条件一次加入或去掉两张卡片。
rx.fragment 把多个组件归为一个，但不会在页面上留下任何包裹元素。它和 React 的 Fragment 相同。语法上只能放一个组件的位置（rx.cond 的一个分支、rx.foreach 返回的值、函数的返回值）想放多个组件时就用它。由于没有包裹的 div，外层 Flex·Grid 的布局不会被打乱。
Component1
Component2
rx.fragment(rx.text("Component1"), rx.text("Component2"))Fragment 没有可见的属性，所以这里不用实验台，而是用 State 来操作。rx.cond 的一个分支只能放一个组件，所以用 Fragment 把两张卡片打包，一起加入或去掉。两张卡片会直接进入 Grid 的格子。
Show cards 4 and 5
class FragmentExtraState(rx.State):
show_extra: bool = False
@rx.event
def set_show_extra(self, value: bool):
self.show_extra = value
rx.vstack(
rx.hstack(
rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
rx.text("Show cards 4 and 5"),
align="center",
),
rx.grid(
rx.card("Card 1"),
rx.card("Card 2"),
rx.card("Card 3"),
rx.cond(
FragmentExtraState.show_extra,
rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
),
columns="3",
spacing="2",
width="100%",
),
width="100%",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
*children | 多个组件 | 无 | 要打包的子元素。不加包裹元素，原样渲染 |
Fragment 在页面上不留下元素，所以没有地方接收样式（width、padding …）或 on_click 之类的事件。即使传入也没有效果，React 还会发出警告。需要样式时，就用 rx.box 包起来。
两个 Grid 都把卡片 2·3 打包成一个。左边是 Fragment，所以 2 和 3 各占一格。右边是 Box，所以 2 和 3 在同一格里上下堆叠，4 的位置也随之改变。
rx.flex(
rx.grid(
rx.card("1"),
rx.fragment(rx.card("2"), rx.card("3")),
rx.card("4"),
columns="2",
spacing="2",
width="45%",
),
rx.grid(
rx.card("1"),
rx.box(rx.card("2"), rx.card("3")),
rx.card("4"),
columns="2",
spacing="2",
width="45%",
),
justify="between",
align="start",
width="100%",
)rx.foreach 的函数必须为每一项返回一个组件。想返回名称和价格这样的两格时，就用 Fragment 打包。这样外层 columns="2" 的 Grid 会依次把名称放在左格、价格放在右格，排得像表格一样整齐。
Coffee
$3
Tea
$2
Cake
$5
class FragmentMenuState(rx.State):
items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]
def fragment_menu_row(row):
return rx.fragment(
rx.text(row[0]),
rx.text(row[1], text_align="right", weight="bold"),
)
rx.grid(
rx.foreach(FragmentMenuState.items, fragment_menu_row),
columns="2",
spacing_y="2",
width="200px",
)会员可以多看到两张卡片，非会员则看到一张横跨两格的提示卡片。rx.cond 的第一个分支是 Fragment，所以两张卡片直接进入 Grid 的格子。
class FragmentOrderState(rx.State):
members_only: bool = True
@rx.event
def toggle_members(self):
self.members_only = not self.members_only
rx.vstack(
rx.button(
rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
on_click=FragmentOrderState.toggle_members,
variant="soft",
),
rx.grid(
rx.card("Mug"),
rx.card("Plate"),
rx.cond(
FragmentOrderState.members_only,
rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
rx.card("Members get two more items", grid_column="span 2"),
),
columns="2",
spacing="2",
width="100%",
max_width="320px",
),
)工坊笔记
rx.fragment(a, b) 不加包裹元素，把多个组件归为一个。
在 rx.cond 的一个分支、rx.foreach 的返回值、函数的返回值里放多个组件时使用。
没有包裹的 div，外层 Flex·Grid 的格子布局保持不变。
不留下元素，所以无法设置样式·事件。需要时用 rx.box。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。