组件工坊：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.heading官方文档
工坊订单
请在商城的专题活动页上放一个大号页面标题，并在下面放两个同样大小的分类标题。
rx.heading 用于页面和章节的标题。它和 rx.text 使用相同的文字属性（size、weight、align、trim、颜色），但默认更粗更大，并通过 as_ 指定 h1~h6 的标题级别。标题级别构成文档的目录结构，应当与外观分开考虑。
rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")改 as_ 时画面不会变，只有改 size 才会改变大小。分别改改这两个属性，看看有什么不同。
试着改属性
label
as_
size
weight
align
trim
color
high_contrast
rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
as_ | "h1" ~ "h6" | "h1" | 标题级别（文档结构），外观不变 |
size | "1" ~ "9" | "6" | 显示大小、行高和字间距 |
weight | "light" "regular" "medium" "bold" | "bold" | 粗细 |
align | "left" "center" "right" | 继承 | 对齐 |
trim | "normal" "start" "end" "both" | "normal" | 裁掉上下由行高带来的留白 |
color_scheme | Radix 颜色名 | 主题色 | 文字颜色 |
high_contrast | True / False | False | 加大与背景的对比度 |
as_child | True / False | False | 只给子元素套用标题样式 |
事件只有 on_click 这类基础事件。
上面三行分别是 h2、h3、h4，级别不同，大小却一样，因为 as_ 只改变语义。像下面三行这样，级别越深就手动把 size 调小，结构和外观才能对应起来。一个页面通常只放一个 h1。
rx.flex(
rx.heading("Level 2", as_="h2"),
rx.heading("Level 3", as_="h3"),
rx.heading("Level 4", as_="h4"),
rx.separator(),
rx.heading("Page title", as_="h1", size="8"),
rx.heading("Section", as_="h2", size="6"),
rx.heading("Subsection", as_="h3", size="4"),
direction="column",
spacing="3",
)size 从 "1" 到 "9"。字越大，相对的行高和字间距越小，大标题也不会显得松散。
rx.flex(
rx.heading("Size 1", size="1"),
rx.heading("Size 3", size="3"),
rx.heading("Size 5", size="5"),
rx.heading("Size 7", size="7"),
rx.heading("Size 9", size="9"),
direction="column",
spacing="3",
)rx.flex(
rx.heading("Light", as_="h2", weight="light"),
rx.heading("Regular", as_="h2", weight="regular"),
rx.heading("Medium", as_="h2", weight="medium"),
rx.heading("Bold", as_="h2", weight="bold"),
rx.separator(),
rx.heading("Left-aligned", as_="h2", align="left"),
rx.heading("Center-aligned", as_="h2", align="center"),
rx.heading("Right-aligned", as_="h2", align="right"),
direction="column",
spacing="3",
width="100%",
)标题字号大，行高带来的留白也大。用 trim="start" 裁掉上方留白后，卡片或盒子顶部的内边距看起来就和左右一样了。"both" 会把上下都裁掉。
The heading now sits as close to the top edge as the text does to the sides.
rx.flex(
rx.heading(
"Without Trim",
as_="h2",
trim="normal",
style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
),
rx.heading(
"With Trim",
as_="h2",
trim="both",
style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
),
rx.box(
rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
rx.text("The heading now sits as close to the top edge as the text does to the sides."),
padding="16px",
style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
),
direction="column",
spacing="3",
)用 color_scheme 使用与主题不同的颜色，用 high_contrast=True 在同一色系里加深。左边是默认，右边是高对比度。
rx.grid(
rx.heading("Indigo", as_="h3", color_scheme="indigo"),
rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
rx.heading("Cyan", as_="h3", color_scheme="cyan"),
rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
rx.heading("Crimson", as_="h3", color_scheme="crimson"),
rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
columns="2",
spacing="2",
)size、weight、align、trim 可以不传字符串，而是用 dict 传入按屏幕宽度区分的值。下面的标题在窄屏上是 "4"，sm 及以上是 "6"，md 及以上是 "8"。试着缩小窗口宽度看看。
rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})页面标题用 h1 放大，两个分类标题用 h2 设成同样大小。最上面的标题用 trim="start" 减少上方留白。
New arrivals for warmer days.
Linen and cotton, six colors.
Light sneakers and sandals.
rx.box(
rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
rx.text("Linen and cotton, six colors.", size="2"),
rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
rx.text("Light sneakers and sandals.", size="2"),
)工坊笔记
rx.heading 默认是 h1、size "6"、加粗。用 as_ 指定 h1~h6 级别。
as_ 只改文档结构，size 只改外观。级别越深，就手动调小 size。
weight、align、color_scheme、high_contrast 与 rx.text 相同。
用 trim="start" 对齐盒子里标题上方的留白。
可以像 size={"initial": "4", "md": "8"} 这样传入按屏幕宽度区分的值。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。