组件工坊：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.callout 是需要吸引用户注意的简短提示。第一个参数传文字，icon 传要放在前面的图标名。图标名直接使用 Icon 页面里的 Lucide 名字。
You will need admin privileges to install and access this application.
rx.callout(
"You will need admin privileges to install and access this application.",
icon="info",
)试着改属性
Your trial ends in 3 days.
text
icon
size
variant
color
high_contrast
rx.callout("Your trial ends in 3 days.", icon="info", size="2", variant="soft", color_scheme="indigo", high_contrast=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
第一个参数（text） | 文字 | 必填 | 提示语句 |
icon | Lucide 图标名 | 无 | 放在前面的图标。不传时只有文字，没有图标 |
size | "1" "2" "3" | "2" | 字号与内边距 |
variant | "soft" "surface" "outline" | "soft" | 填充方式 |
color_scheme | Radix 颜色名 | 主题色 | 体现提示性质的颜色 |
high_contrast | True / False | False | 加大对比 |
role | "alert" 等 | 无 | 告诉屏幕阅读器的角色 |
用红色加上警告图标，再设置 role="alert"，屏幕阅读器也会立即朗读这段文字。适合错误、拒绝访问这类需要马上告知的内容。
Access denied. Please contact the network administrator to view this page.
rx.callout(
"Access denied. Please contact the network administrator to view this page.",
icon="triangle_alert",
color_scheme="red",
role="alert",
)size 为 "1"~"3"。数字越大，文字和留白越大。
Size 3
Size 2
Size 1
rx.flex(
rx.callout("Size 3", icon="info", size="3"),
rx.callout("Size 2", icon="info", size="2"),
rx.callout("Size 1", icon="info", size="1"),
direction="column",
spacing="3",
align="start",
)variant 有三种：默认值 "soft"（浅色背景）、"surface"（浅色背景加边框）、"outline"（只有边框）。
soft (default)
surface
outline
rx.flex(
rx.callout("soft (default)", icon="info", variant="soft"),
rx.callout("surface", icon="info", variant="surface"),
rx.callout("outline", icon="info", variant="outline"),
direction="column",
spacing="3",
)color_scheme 不受主题影响，单独决定提示的颜色。用颜色区分成功、警告、失败，读文字之前就能看出性质。
Your changes were saved.
Your trial ends in 3 days.
Payment failed.
rx.flex(
rx.callout("Your changes were saved.", icon="circle_check", color_scheme="green"),
rx.callout("Your trial ends in 3 days.", icon="clock", color_scheme="amber"),
rx.callout("Payment failed.", icon="circle_x", color_scheme="red"),
direction="column",
spacing="3",
)high_contrast=True 会把文字加深、加大对比。
Default contrast
High contrast
rx.flex(
rx.callout("Default contrast", icon="info"),
rx.callout("High contrast", icon="info", high_contrast=True),
direction="column",
spacing="3",
)rx.callout("文字", icon=…) 其实是一次生成三个部件的快捷写法。在 rx.callout.root 里放入 rx.callout.icon（图标位置）和 rx.callout.text（文字位置），得到的样子相同。想在文字中间插入链接，或单独给图标设置属性时，就这样组装。外观属性（size、variant、color_scheme、high_contrast）写在 root 上。
You will need admin privileges to install this application.
rx.callout.root(
rx.callout.icon(rx.icon("info")),
rx.callout.text(
"You will need ",
rx.link("admin privileges", href="#"),
" to install this application.",
),
color_scheme="blue",
)付款被拒用红色警告醒目显示，配送说明用 surface 和小尺寸低调放置。
Your card was declined. Please use another payment method.
Orders placed after 3 PM ship the next business day.
rx.flex(
rx.callout(
"Your card was declined. Please use another payment method.",
icon="triangle_alert",
color_scheme="red",
role="alert",
),
rx.callout.root(
rx.callout.icon(rx.icon("info")),
rx.callout.text("Orders placed after 3 PM ship the next business day."),
variant="surface",
size="1",
),
direction="column",
spacing="3",
)工坊笔记
用 rx.callout("文字", icon="info") 制作简短提示。
size 为 "1"~"3"，variant：soft（默认）· surface · outline，用 color_scheme 表示性质。
需要立即告知的错误用 color_scheme="red" 加 role="alert"。
要在文字里放链接等内容时，用 callout.root + callout.icon + callout.text 组装。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。