组件工坊：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
Reflex 官方组件库的 100 个组件，每页一个。改动属性，界面和 Python 代码会一起变化的互动组件图鉴
Reflex 官方组件库里有 100 个组件，从按钮到图表、数据表格、对话框应有尽有。本课程是一本组件图鉴，把这 100 个组件每页讲一个。
从今天起，你就是“组件工坊”的学徒。工坊里不断接到界面零件的订单，每一页都附着一张订单。学会这一页的组件之后，你就能亲手做出订单上的零件。
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx. 名称和官方文档链接。工坊订单
例如：“结账页面上要一个醒目的购买按钮，再加一个不那么重要的取消按钮。”每一页都附有这样一张订单。
| 货架 | 数量 | 里面有什么 |
|---|---|---|
| 布局 | 13 | Box、Flex、Stack、Grid、Container、Card … 页面的骨架 |
| 排版 | 10 | Text、Heading、Link、Code、Markdown … 文字 |
| 表单 | 10 | Button、Input、Checkbox、Select、Slider、Form、Upload … 接收输入 |
| 数据展示 | 11 | Badge、Avatar、Icon、Callout、Progress … 展示信息 |
| 展开与切换 | 3 | Tabs、Accordion、Segmented Control |
| 浮层 | 9 | Tooltip、Popover、Dialog、Drawer、Dropdown Menu、Toast … 浮在上层的东西 |
| 动态渲染 | 4 | Cond、Match、Foreach、Auto Scroll：随 State 变化的画面 |
| 媒体 | 3 | Image、Audio、Video |
| 表格与数据网格 | 3 | Table、Data Table、Data Editor |
| 图表 | 12 | Area、Bar、Line、Pie、Radar、Scatter、Sankey …（Recharts） |
| 图表部件 | 7 | Axis、Grid、Tooltip、Legend、Label、Reference、Brush |
| 其他图表库 | 2 | Plotly、Pyplot |
| HTML 元素 | 7 | 通过 rx.el 使用的原生 HTML 标签 |
| 其他工具 | 6 | Theme、Skeleton、Clipboard、Html Embed、Script、Memo |
不必按顺序阅读。需要哪个组件，直接在左侧目录里找到它点进去即可。初次来访的话，建议先看布局和表单。
工坊笔记
一页 = 一个组件。上面是真实画面，下面是它的代码。
在“试着改属性”里改动取值，代码也会一起变。看中的组合直接复制使用即可。
需要 State 的示例会连同 State 类一起展示。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。