组件工坊：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.grid官方文档
工坊订单
请把多张照片按每行三张对齐，像棋盘一样排开。
rx.grid 是把子元素对齐到横竖格子里、像棋盘一样摆放的盒子。如果说 Flex 是沿一条线排开，那么 Grid 是同时对齐行和列。用 columns 或 rows 定下格数，子元素就会依次填进格子。
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
columns="3",
spacing="4",
width="100%",
)试着改属性
改一改格数、横纵间距和格内对齐。只有 Card 2 更高，所以同一行的其他卡片能体现出 align 的差别。
试着改属性
columns
spacing_x
spacing_y
align
rx.grid(
rx.card("Card 1"),
rx.card("Card 2", height="5rem"),
rx.card("Card 3"),
rx.card("Card 4"),
rx.card("Card 5"),
rx.card("Card 6"),
rx.card("Card 7"),
columns="3",
spacing_x="3",
spacing_y="3",
align="stretch",
width="100%",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
columns | "1" ~ "9" 或 CSS 字符串（"120px 1fr"） | 无 | 列数或列宽模板 |
rows | "1" ~ "9" 或 CSS 字符串 | 无 | 行数或行高模板 |
flow | "row" "column" "dense" "row-dense" "column-dense" | "row" | 子元素填充格子的顺序 |
align | "start" "center" "end" "baseline" "stretch" | "stretch" | 格子内的纵向对齐 |
justify | "start" "center" "end" "between" | "start" | 整组格子的横向对齐。只在有剩余空间时可见 |
spacing | "0" ~ "9" | 无 | 行·列间距 |
spacing_x spacing_y | "0" ~ "9" | 无 | 分别设置列间距·行间距 |
as_child | True / False | False | 渲染为子元素并合并属性 |
所有属性都可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。
按行来定
同时设置 rows="3" 和 flow="column"，子元素会从上到下填满三格，再转到旁边一列。这时列宽随内容而定，会留出剩余空间，justify="between" 便把各列撑开到两端。
rx.grid(
rx.foreach(
rx.Var.range(12),
lambda i: rx.card(f"Card {i + 1}", height="10vh"),
),
rows="3",
flow="column",
justify="between",
spacing="4",
width="100%",
)直接指定格宽，并跨多格
在 columns 里写 CSS grid-template-columns 的值而不是数字，就能逐列指定宽度。"120px 1fr" 表示第一列 120px，其余都给第二列。给子元素设置 CSS grid_column="span 2" 会占两列，grid_row="span 2" 会占两行。
rx.vstack(
rx.grid(
rx.card("Sidebar"),
rx.card("Content"),
columns="120px 1fr",
spacing="3",
width="100%",
),
rx.grid(
rx.card("Wide", grid_column="span 2"),
rx.card("1"),
rx.card("2"),
rx.card("3"),
rx.card("Tall", grid_row="span 2"),
rx.card("4"),
rx.card("5"),
columns="3",
spacing="3",
width="100%",
),
width="100%",
)flow="dense"：填补空格
两格宽的卡片接连出现时，行尾会留下空格。默认的 flow="row"（左）按顺序排列、保留空格；flow="dense"（右）则把后面的小卡片挪到前面的空格里填上。
rx.flex(
rx.grid(
rx.card("A", grid_column="span 2"),
rx.card("B", grid_column="span 2"),
rx.card("C"),
rx.card("D"),
columns="3",
flow="row",
spacing="2",
width="45%",
),
rx.grid(
rx.card("A", grid_column="span 2"),
rx.card("B", grid_column="span 2"),
rx.card("C"),
rx.card("D"),
columns="3",
flow="dense",
spacing="2",
width="45%",
),
justify="between",
width="100%",
)按屏幕宽度改变列数
用 columns=rx.breakpoints(...) 让窄屏显示 1 列，xs（520px）及以上显示 2 列，md（1024px）及以上显示 3 列。试着调整浏览器窗口的宽度。
rx.grid(
rx.foreach(rx.Var.range(6), lambda i: rx.card(f"Card {i + 1}")),
columns=rx.breakpoints(initial="1", xs="2", md="3"),
spacing="3",
width="100%",
)完成订单
用 columns="3" 排开六张照片，每张图用 width="100%" 填满格子。格子宽度相同，照片的大小也就整整齐齐。
rx.grid(
*[
rx.image(
src=f"https://picsum.photos/id/{n}/300/300",
width="100%",
height="auto",
border_radius="6px",
)
for n in [10, 11, 12, 13, 14, 15]
],
columns="3",
spacing="2",
width="100%",
max_width="420px",
)工坊笔记
rx.grid 同时对齐行和列。用 columns 或 rows 定格数。
columns 可以写 "1"~"9"，也可以写 "120px 1fr" 这样的 CSS 模板字符串。
用 spacing（整体）、spacing_x（列间）、spacing_y（行间）设置间距。
flow 决定填充顺序，子元素的 grid_column="span 2" 决定跨几格。
像 columns=rx.breakpoints(initial="1", md="3") 这样，按屏幕宽度改变列数。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。