组件工坊：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.skeleton官方文档
工坊订单
个人资料卡片加载的那 1~2 秒里，请显示同样大小的灰色占位，免得页面跳动。
rx.skeleton 是加载内容期间显示在原位置上的灰色占位符。包住子元素，它就变成和子元素一样大的闪烁盒子；
加载完成后，真正的内容出现在同一位置，页面布局不会晃动。不给 loading 时就是占位状态。
rx.skeleton(rx.button("Loading button"))关闭 loading，占位就会撤掉，显示真正的内容。没有子元素的 rx.skeleton 用 width·height 决定大小。
试着改属性
loading
title
width
height
rx.vstack(
rx.flex(
rx.skeleton(rx.avatar(fallback="RX", size="4"), loading=True),
rx.box(
rx.skeleton(rx.heading("Grace Hopper", size="3"), loading=True),
rx.skeleton(rx.text("Posted two days ago.", size="2"), loading=True),
),
rx.skeleton(rx.button("Follow"), loading=True),
spacing="3",
align="center",
),
rx.skeleton(width="240px", height="24px", loading=True),
spacing="4",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
loading | True / False | True | 显示占位还是真正的内容 |
width height | CSS 长度（可响应式） | 子元素的大小 | 占位的大小 |
min_width max_width | CSS 长度 | 无 | 宽度的最小·最大值 |
min_height max_height | CSS 长度 | 无 | 高度的最小·最大值 |
这是官方文档的示例。包住按钮的两个占位用 height 改了高度，下面两个分别是 loading 为 True 和 False 的情况。
Text is already loaded.
rx.vstack(
rx.skeleton(rx.button("button-small"), height="10px"),
rx.skeleton(rx.button("button-big"), height="20px"),
rx.skeleton(rx.text("Text is loaded."), loading=True),
rx.skeleton(rx.text("Text is already loaded."), loading=False),
)文字的占位要包住文字本身，而不是包住文字的父元素。包住父元素，父元素的整个宽度都会变灰；
包住文字，只有实际文字的长度会变灰。写成 rx.text(rx.skeleton("...")) 这样。
Wrap the parent:
Wrap the text itself:
rx.vstack(
rx.text("Wrap the parent:", size="1", color_scheme="gray"),
rx.skeleton(rx.box(rx.text("Short text"), width="100%")),
rx.text("Wrap the text itself:", size="1", color_scheme="gray"),
rx.text(rx.skeleton("Short text")),
width="300px",
)不放子元素、只给 width·height，就是一个空的占位盒子。用来预先占住还不知道会放什么内容的文字行、图片、图标的位置。
rx.vstack(
rx.skeleton(width="240px", height="16px"),
rx.skeleton(width="180px", height="16px"),
rx.skeleton(width="100%", max_width="320px", height="80px"),
rx.skeleton(width="48px", height="48px"),
width="100%",
)点击 Reload 后，后台事件打开 loading，等待 1.5 秒后再关闭。在这期间，头像、名字、简介会按各自的大小变成占位。
简介文字是在 rx.text 里包住文字本身，所以只有文字长度那么宽会变灰。
Wrote the first program.
import asyncio
class SkeletonProfileState(rx.State):
loading: bool = False
name: str = "Ada Lovelace"
bio: str = "Wrote the first program."
@rx.event(background=True)
async def reload_profile(self):
async with self:
self.loading = True
await asyncio.sleep(1.5)
async with self:
self.loading = False
rx.card(
rx.flex(
rx.skeleton(rx.avatar(fallback="AL", size="5", radius="full"), loading=SkeletonProfileState.loading),
rx.box(
rx.skeleton(rx.heading(SkeletonProfileState.name, size="4"), loading=SkeletonProfileState.loading),
rx.text(rx.skeleton(SkeletonProfileState.bio, loading=SkeletonProfileState.loading), size="2", color_scheme="gray"),
),
spacing="4",
align="center",
),
rx.button(
"Reload",
on_click=SkeletonProfileState.reload_profile,
disabled=SkeletonProfileState.loading,
variant="soft",
margin_top="12px",
),
max_width="360px",
)工坊笔记
rx.skeleton(子元素) 会变成与子元素同样大小的灰色占位。
loading=False 时显示真正的内容。不给时是占位状态（True）。
文字要包住文字本身而不是父元素：rx.text(rx.skeleton("..."))。
不放子元素，用 width·height 占住空位。
占位期间，里面的按钮·输入框无法点击。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。