组件工坊：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.button 是“按下去就会发生点什么”的地方。保存、提交、下一步、打开对话框……凡是用户要“执行”某个操作的地方都用它。传入的文字会原样显示在按钮里。
rx.button("Save")按钮的外观大多由五个属性决定。在下面的实验台上改动取值，按钮和代码会一起变化。
试着改属性
label
variant
size
color
radius
high_contrast
loading
disabled
rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
variant | "classic" "solid" "soft" "surface" "outline" "ghost" | "solid" | 强调程度。页面的主要操作用 solid，次要操作用 soft·outline·ghost |
size | "1" ~ "4" | "2" | 高度和字号 |
color_scheme | Radix 颜色名（"indigo"、"red" …） | 主题色 | 有含义的颜色，比如删除用 red、成功用 green |
radius | "none" "small" "medium" "large" "full" | 主题值 | 圆角大小 |
high_contrast | True / False | False | 加大与背景的对比度 |
loading | True / False | False | 显示加载图标并禁止点击 |
disabled | True / False | False | 禁止点击 |
按强调程度从强到弱排列。一个页面里只给最主要的那个操作用强 variant，用户一眼就知道该按哪里。
rx.flex(
rx.button("classic", variant="classic"),
rx.button("solid", variant="solid"),
rx.button("soft", variant="soft"),
rx.button("surface", variant="surface"),
rx.button("outline", variant="outline"),
rx.button("ghost", variant="ghost"),
spacing="3",
wrap="wrap",
)把 rx.icon 作为子元素放进去，文字旁边就会出现图标。只有图标的按钮用 rx.icon_button，并用 aria_label 给它起个名字，方便屏幕阅读器识别。
rx.flex(
rx.button(rx.icon("download"), "Download"),
rx.button("Next", rx.icon("arrow-right"), variant="soft"),
rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
spacing="3",
align="center",
)按钮的核心是 on_click。连接 State 的事件处理器后，每按一次，服务器上的值就会改变，画面也随之更新。还可以把文字和 State 值混在一起作为子元素传入。
class ButtonCountState(rx.State):
count: int = 0
@rx.event
def increment(self):
self.count += 1
@rx.event
def reset_count(self):
self.count = 0
rx.flex(
rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
spacing="3",
)主要操作“购买”用 solid；用来反悔的“取消”用 soft 加灰色，弱化存在感。
rx.flex(
rx.button("Cancel", variant="soft", color_scheme="gray"),
rx.button(rx.icon("shopping-cart"), "Buy now"),
spacing="3",
justify="end",
)工坊笔记
用 rx.button("文字") 创建，把事件处理器连到 on_click 上。
variant：classic · solid · soft · surface · outline · ghost。只给最主要的一个操作用强样式。
size 取 "1"~"4"，color_scheme 用有含义的颜色，loading·disabled 让按钮无法点击。
图标作为子元素用 rx.icon；只有图标的按钮用 rx.icon_button + aria_label。
在表单里当提交按钮用时，加上 type="submit"（Form 页面会讲到）。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。