组件工坊：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.center官方文档
工坊订单
请在空购物车页面的正中央放上图标和提示文字。
rx.center 是把子元素放在自身横向·纵向正中央的盒子。它基于 rx.flex，可以使用 Flex 的所有属性，并且一开始就带有居中对齐样式（align_items·justify_content 为 center）。空状态提示、图标徽章、加载中提示等需要居中摆放的地方都会用到它。
Hello World!
rx.center(
rx.text("Hello World!"),
border="4px solid var(--gray-7)",
border_radius="15px",
width="50%",
padding="12px",
)盒子比内容大时，才看得出居中效果。无论怎么改宽度和高度，卡片始终停在正中央。
试着改属性
direction
spacing
width
height
rx.center(
rx.card("Card 1"),
rx.card("Card 2"),
rx.card("Card 3"),
direction="row",
spacing="3",
width="100%",
height="12rem",
border="1px dashed var(--gray-7)",
border_radius="8px",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
direction | "row" "column" "row-reverse" "column-reverse" | "row" | 多个子元素的排列方向 |
spacing | "0" ~ "9" | 无 | 子元素间距 |
wrap | "nowrap" "wrap" "wrap-reverse" | "nowrap" | 放不下时换行 |
width height | CSS 长度 | 随内容 | 用来居中的区域大小 |
as_child | True / False | False | 渲染为子元素并合并属性 |
它也接受 Flex 的 align·justify，但 Center 已经把两者都设为居中，几乎不需要另行设置。
Center 就相当于 rx.flex(..., align="center", justify="center") 的简写。两个盒子的结果完全一样。
rx.center
rx.flex + align + justify
rx.flex(
rx.center(rx.text("rx.center"), width="45%", height="6rem", background_color="var(--gray-3)"),
rx.flex(
rx.text("rx.flex + align + justify"),
align="center",
justify="center",
width="45%",
height="6rem",
background_color="var(--gray-3)",
),
justify="between",
width="100%",
)把宽度和高度设成一样，再把圆角调圆，就成了装图标或数字的圆形徽章。里面的内容由 Center 自动居中。
42
rx.flex(
rx.center(rx.icon("check", color="var(--grass-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--grass-3)"),
rx.center(rx.icon("x", color="var(--red-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--red-3)"),
rx.center(rx.text("42", weight="bold"), width="48px", height="48px", border_radius="8px", background_color="var(--accent-3)"),
spacing="3",
)用 direction="column" 把图标、标题、提示和按钮纵向堆叠，放在宽裕的 min_height 正中央。要放在整页正中央，就设置 min_height="100vh"。
Add something you like.
rx.center(
rx.icon("shopping-cart", size=40, color="var(--gray-9)"),
rx.heading("Your cart is empty", size="4"),
rx.text("Add something you like.", size="2", color="var(--gray-11)"),
rx.button("Go shopping", variant="soft"),
direction="column",
spacing="3",
width="100%",
min_height="16rem",
border="1px dashed var(--gray-6)",
border_radius="8px",
)工坊笔记
rx.center 把子元素放在横向·纵向的正中央。
相当于 rx.flex(align="center", justify="center")。Flex 的属性照样能用。
盒子要比内容大才看得出居中：width·height·min_height。
多个子元素用 direction 堆叠、用 spacing 设置间距。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。