组件工坊：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.radio_group 是让用户从多个选项中只选一个的一组控件。选项不超过五六个、需要一眼看全时使用。选项很多、需要节省空间时用 Select。传入列表，每个选项都会生成一个圆点和标签。
rx.radio_group(["1", "2", "3"], default_value="1")试着改属性
direction
spacing
size
variant
color
high_contrast
disabled
rx.radio_group(["Small", "Medium", "Large"], default_value="Medium", direction="row", spacing="2", size="2", variant="classic", color_scheme="indigo", high_contrast=False, disabled=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
第一个参数（items） | 字符串列表 / Var | 必填 | 选项列表，值与标签相同 |
value | 字符串 / Var | 无 | 受控的选中值（配合 on_change） |
default_value | 字符串 | "" | 只在开始时选一次的值 |
direction | "row" "column" "row-reverse" "column-reverse" | "row" | 排列方向（仅高层） |
spacing | "0" ~ "9" | "2" | 选项间距（仅高层） |
size | "1" ~ "3" | "2" | 大小 |
variant | "classic" "surface" "soft" | "classic" | 外观 |
color_scheme, high_contrast | Radix 颜色名 / True | 主题值 | 颜色与对比度 |
disabled, required, name | 禁用、必须选择才能提交、表单提交名 | ||
on_change | 事件 | 选中项变化时触发，传入该值（字符串） |
每选一个选项，on_change 都会传入该选项的值。rx.radio 是 rx.radio_group 的别名，像官方文档那样写成 rx.radio([...]) 也一样。
class RadioGroupBasicState(rx.State):
item: str = "No Selection"
@rx.event
def set_item(self, item: str):
self.item = item
rx.vstack(
rx.badge(RadioGroupBasicState.item, color_scheme="green"),
rx.radio(["1", "2", "3"], on_change=RadioGroupBasicState.set_item, direction="row"),
)把 State 的值交给 value，选中项就始终跟随这个值。按钮改了 State，选中项也会跟着移动。不给 value、只给 default_value 就是非受控：只定初始选择，之后由浏览器保管。
Selected: M
class RadioGroupControlState(rx.State):
size: str = "M"
@rx.event
def set_size(self, value: str):
self.size = value
rx.vstack(
rx.radio_group(
["S", "M", "L", "XL"],
value=RadioGroupControlState.size,
on_change=RadioGroupControlState.set_size,
),
rx.hstack(
rx.button("Pick XL", on_click=RadioGroupControlState.set_size("XL"), size="1", variant="soft"),
rx.text("Selected: ", rx.code(RadioGroupControlState.size), size="2"),
align="center",
),
)想让标签与值不同、只禁用某一个选项，或者自己安排布局时，就用底层 API。rx.radio_group.root 负责整组和选中值（value、default_value、on_change、name），rx.radio_group.item 是单个圆点。item 只接受 value、disabled、required。标签用 rx.text(..., as_="label") 包起来加上。
rx.radio_group.root(
rx.flex(
rx.text(rx.flex(rx.radio_group.item(value="card"), "Credit card", spacing="2"), as_="label", size="2"),
rx.text(rx.flex(rx.radio_group.item(value="bank"), "Bank transfer", spacing="2"), as_="label", size="2"),
rx.text(
rx.flex(rx.radio_group.item(value="cash", disabled=True), "Cash (unavailable)", spacing="2"),
as_="label",
size="2",
color_scheme="gray",
),
direction="column",
spacing="2",
),
default_value="card",
color_scheme="teal",
)name 是整组的名字，会以 名字: 选中值 的形式进入表单数据。什么都没选时，这个键不会出现。required=True 时必须选一个才能提交。
Results:
{}class RadioGroupFormState(rx.State):
form_data: dict = {}
@rx.event
def handle_submit(self, form_data: dict):
self.form_data = form_data
rx.card(
rx.vstack(
rx.form.root(
rx.vstack(
rx.radio_group(
["Option 1", "Option 2", "Option 3"],
name="radio_choice",
required=True,
direction="row",
),
rx.button("Submit", type="submit"),
spacing="4",
),
on_submit=RadioGroupFormState.handle_submit,
reset_on_submit=True,
),
rx.divider(),
rx.hstack(rx.text("Results:", weight="bold"), rx.badge(RadioGroupFormState.form_data.to_string())),
spacing="4",
),
)运费表放在一个常量 dict 里，计算变量 fee 查出所选方式的运费。选项列表也由同一个 dict 的键生成，所以表里加一行，选项也会跟着多一个。
Shipping
Fee: 0 KRW
RADIO_SHIPPING_FEES = {"Standard": 0, "Express": 3000, "Same day": 7000}
class RadioGroupShippingState(rx.State):
speed: str = "Standard"
@rx.event
def set_speed(self, value: str):
self.speed = value
@rx.var
def fee(self) -> int:
return RADIO_SHIPPING_FEES.get(self.speed, 0)
rx.card(
rx.vstack(
rx.text("Shipping", weight="bold"),
rx.radio_group(
list(RADIO_SHIPPING_FEES),
value=RadioGroupShippingState.speed,
on_change=RadioGroupShippingState.set_speed,
direction="column",
),
rx.divider(),
rx.text("Fee: ", RadioGroupShippingState.fee, " KRW", size="2"),
),
width="240px",
)工坊笔记
rx.radio_group([选项...]) 只能选一个。选项少时用它代替 Select。
on_change 传入选中值。受控用 value + on_change，只定初始值用 default_value。
direction · spacing 只有高层才有。精细布局和标签用 root + item。
在表单中是 name: 选中值。required 时必须选择才能提交。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。