组件工坊：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.spinner官方文档
工坊订单
点击“保存草稿”按钮后，在保存期间让软盘图标的位置转起加载动画。
rx.spinner 是表示任务正在进行的旋转指示器，用在不知道还要多久的时候。如果知道剩余多少，rx.progress 更合适。
rx.spinner()放入子元素后，loading 打开期间显示旋转指示器，关闭后显示子元素。
试着改属性
size
loading
rx.spinner(rx.text("Content is ready"), size="2", loading=True)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1" "2" "3" | "2" | 大小 |
loading | True / False | True | 打开时显示旋转指示器，关闭时显示子元素 |
size 为 "1"~"3"。放在文字旁边时，与字号相匹配。
rx.hstack(
rx.spinner(size="1"),
rx.spinner(size="2"),
rx.spinner(size="3"),
align="center",
spacing="4",
)按钮自带 loading 属性，打开后文字会换成旋转指示器，按钮也无法点击（第一个）。如果是带图标的按钮，只把图标位置换成 rx.spinner，再用 disabled 禁用按钮，就能保留文字、只让图标转动（第二个）。像第三个那样 loading=False 时，被包裹的图标照常显示。
rx.flex(
rx.button("Bookmark", loading=True),
rx.button(rx.spinner(loading=True), "Bookmark", disabled=True),
rx.button(rx.spinner(rx.icon("bookmark"), loading=False), "Bookmark"),
spacing="3",
wrap="wrap",
)把 State 值传给 loading，任务进行期间才显示旋转指示器，结束后结果会出现在同一位置。不需要另外留出位置，也不用写 rx.cond。
Loaded 0 times
import asyncio
class SpinnerLoadState(rx.State):
loading: bool = False
loads: int = 0
@rx.event(background=True)
async def load_result(self):
async with self:
if self.loading:
return
self.loading = True
await asyncio.sleep(1.5)
async with self:
self.loading = False
self.loads += 1
rx.hstack(
rx.button("Load", on_click=SpinnerLoadState.load_result, variant="soft"),
rx.spinner(rx.text("Loaded ", SpinnerLoadState.loads, " times"), loading=SpinnerLoadState.loading),
spacing="4",
align="center",
)保存期间软盘图标变成旋转指示器，按钮被锁定。完成后图标恢复，并贴上 "Saved" 徽章。
import asyncio
class SpinnerSaveState(rx.State):
saving: bool = False
saved: bool = False
@rx.event(background=True)
async def save_draft(self):
async with self:
if self.saving:
return
self.saving = True
self.saved = False
await asyncio.sleep(1.2)
async with self:
self.saving = False
self.saved = True
rx.hstack(
rx.button(
rx.spinner(rx.icon("save"), loading=SpinnerSaveState.saving),
"Save draft",
on_click=SpinnerSaveState.save_draft,
disabled=SpinnerSaveState.saving,
),
rx.cond(SpinnerSaveState.saved, rx.badge("Saved", color_scheme="green")),
spacing="3",
align="center",
)工坊笔记
rx.spinner() 表示不知何时结束的等待。知道剩余多少时用 rx.progress。
size "1"~"3".
包裹子元素时，loading=True 期间显示旋转指示器，False 时显示子元素。
要替换整个按钮用 button(loading=True)，只让图标转动就用 rx.spinner 包住图标。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。