组件工坊：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.card官方文档
工坊订单
请在博客首页为每篇文章做一张带标题和摘要的卡片，点击卡片就跳转到那篇文章。
rx.card 是把相关内容归成一块的盒子。它和 Box 相似，但带有边框，遵循主题的颜色和圆角，并通过 size 按 Radix 等级（"1"~"5"）设定内边距。因此比起 Box，用更少的样式就能得到与主题协调的外观。
rx.card("Basic Card")试着改属性
size 变大时，内边距和圆角会一起变大。用 variant 改变边框和背景的风格。
试着改属性
Post title
A short summary of the post.
title
size
variant
width
rx.card(
rx.heading("Post title", size="3"),
rx.text("A short summary of the post.", size="2"),
size="2",
variant="surface",
width="280px",
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1" ~ "5" | "1" | 内边距和圆角 |
variant | "surface" "classic" "ghost" | "surface" | 边框·背景的风格 |
as_child | True / False | False | 不渲染卡片本身，而是把子元素（链接、按钮）渲染成卡片的样子 |
size 可以用 rx.breakpoints(...) 按屏幕宽度给出不同的值。其他尺寸·边距像 Box 一样用 CSS 属性设置。
五种尺寸
这是官方文档的示例。同样的文字，size 越大，卡片越宽松。
rx.flex(
rx.card("Card 1", size="1"),
rx.card("Card 2", size="2"),
rx.card("Card 3", size="3"),
rx.card("Card 4", size="4"),
rx.card("Card 5", size="5"),
spacing="2",
align_items="flex-start",
flex_wrap="wrap",
)三种 variant
官方文档正文里没有示例，但属性表里列出了 variant。有默认的 surface、带立体感的 classic、没有边框的 ghost。ghost 适合只想借用卡片留白规则的时候。
rx.flex(
rx.card("surface", variant="surface"),
rx.card("classic", variant="classic"),
rx.card("ghost", variant="ghost"),
spacing="4",
wrap="wrap",
)渲染成其他元素：as_child
设置 as_child=True 后，不渲染卡片本身，而是把紧挨着的子元素渲染成卡片的样子。子元素是链接时，整张卡片就成了可以点击的链接。常用于链接或按钮。点击下面的卡片，会在新标签页打开 Reflex 文档。
rx.card(
rx.link(
rx.flex(
rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
rx.box(
rx.heading("Quick Start", as_="h2", size="3"),
rx.text("Get started with Reflex in 5 minutes."),
),
spacing="2",
),
href="https://reflex.dev/docs/getting-started/introduction/",
is_external=True,
),
as_child=True,
)用 Inset 铺到边缘
想让卡片里的图片一直铺满到边框，就用 rx.inset 包起来。它把内容向外拉出与内边距相同的距离，贴到边缘。详细用法在 Inset 页面介绍。
Fresh strawberries, picked this morning.
rx.card(
rx.inset(
rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
side="top",
pb="current",
),
rx.text("Fresh strawberries, picked this morning."),
width="260px",
)完成订单
每篇文章一张卡片，用 as_child=True 把整张卡片做成链接。上方的图片用 rx.inset 铺到边缘。链接用 underline="none" 去掉了下划线。
rx.flex(
rx.card(
rx.link(
rx.box(
rx.inset(
rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
side="top",
pb="current",
),
rx.heading("Glazing basics", size="3"),
rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
),
href="#",
underline="none",
),
as_child=True,
width="240px",
),
rx.card(
rx.link(
rx.box(
rx.inset(
rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
side="top",
pb="current",
),
rx.heading("Kiln care", size="3"),
rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
),
href="#",
underline="none",
),
as_child=True,
width="240px",
),
spacing="4",
wrap="wrap",
)工坊笔记
rx.card 是带边框和主题外观的打包盒子。
size "1"~"5" 决定留白和圆角，variant surface·classic·ghost 决定风格。
as_child=True 时子元素（链接·按钮）变成卡片的样子，整张卡片都可以点击。
要让图片铺到边缘，就用 rx.inset 包起来。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。