组件工坊：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.blockquote官方文档
工坊订单
请在商城首页用引用的形式放大展示一条顾客评价，并能用按钮翻到下一条。
rx.blockquote 是把别人的话或文字单独拎出来展示的引用段落。它渲染为 HTML <blockquote>，左侧带一条竖线，与正文区分开。适合评价、名言、文档摘录这类整段引用。
Perfect typography is certainly the most elusive of all arts.
rx.blockquote("Perfect typography is certainly the most elusive of all arts.")可以改变大小、粗细和颜色。颜色会同时作用于文字和左侧竖线。
试着改属性
Perfect typography is certainly the most elusive of all arts.
label
size
weight
color
high_contrast
rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
size | "1" ~ "9" | 继承 | 字号、行高和字间距 |
weight | "light" "regular" "medium" "bold" | 继承 | 粗细 |
color_scheme | Radix 颜色名 | 主题色 | 文字和竖线的颜色 |
high_contrast | True / False | False | 让文字更深 |
cite | 地址字符串 | 无 | 引用来源的地址（不显示在页面上） |
事件只有基础事件。
size 为 "1"~"9"。越大，相对行高和字间距越小，大号引用也显得紧凑扎实。
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
Perfect typography is an elusive art.
rx.flex(
rx.blockquote("Perfect typography is an elusive art.", size="1"),
rx.blockquote("Perfect typography is an elusive art.", size="3"),
rx.blockquote("Perfect typography is an elusive art.", size="5"),
rx.blockquote("Perfect typography is an elusive art.", size="7"),
rx.separator(),
rx.blockquote("Perfect typography is an elusive art.", weight="light"),
rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
direction="column",
spacing="3",
)用 color_scheme 使用与主题不同的颜色，用 high_contrast=True 加深文字。左边是默认，右边是高对比度。
Good design is honest.
Good design is honest.
Good design is honest.
Good design is honest.
Good design is honest.
Good design is honest.
Good design is honest.
Good design is honest.
rx.grid(
rx.blockquote("Good design is honest.", color_scheme="indigo"),
rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
rx.blockquote("Good design is honest.", color_scheme="cyan"),
rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
rx.blockquote("Good design is honest.", color_scheme="crimson"),
rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
rx.blockquote("Good design is honest.", color_scheme="orange"),
rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
columns="2",
spacing="3",
)cite 里写被引用文字的地址。它不会显示在浏览器页面上，只作为 HTML 属性保留，让搜索引擎和辅助技术知道出处。要给读者看出处，就像下面这样另外加一个 rx.text。
Less, but better.
Dieter Rams
rx.box(
rx.blockquote(
"Less, but better.",
cite="https://en.wikipedia.org/wiki/Dieter_Rams",
size="5",
),
rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)rx.blockquote 是独立的段落，rx.text.quote 是放在句子里的短引用。要断开句子单独展示时用 Blockquote，嵌在句子中时用 Quote。
A blockquote is its own block, set apart from the paragraph.
A quote stays inside the sentence: short and inline
, then the sentence goes on.
rx.flex(
rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
rx.text(
"A quote stays inside the sentence: ",
rx.text.quote("short and inline"),
", then the sentence goes on.",
),
direction="column",
spacing="4",
)把评价列表放进 State，只改变当前要显示的序号（index）。引用文字和姓名都是 State 值，所以每次点击按钮都会一起更新。
Arrived in two days and fits perfectly.
Mina, Seoul
class BlockquoteReviewState(rx.State):
reviews: list[dict[str, str]] = [
{"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
{"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
{"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
]
index: int = 0
@rx.event
def next_review(self):
self.index = (self.index + 1) % len(self.reviews)
rx.card(
rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
rx.flex(
rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
rx.spacer(),
rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
align="center",
margin_top="12px",
padding_left="16px",
),
max_width="420px",
)工坊笔记
rx.blockquote("…") 是单独展示的引用段落（<blockquote>）。
用 size "1"~"9"、weight、color_scheme、high_contrast 决定样式。
cite 只在 HTML 中保留出处地址。可见的出处另用 rx.text。
句子里的短引用用 rx.text.quote。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。