R

ReflexKR

Reflex 官方文档

组件工坊：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

组件工坊：Reflex 组件库 100 例
数据展示

Avatar

rx.avatar

官方文档

工坊订单

请在个人资料卡片上方放一张圆形的用户照片。没有照片的人用名字首字母代替。

rx.avatar 是代表用户的小头像。把图片地址传给 src 会显示照片；不传 src、只给 fallback，就会显示首字母之类的文字。用在评论、个人资料、参与者列表这类展示“是谁”的位置。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200"),
    rx.avatar(fallback="RX"),
    spacing="3",
)

试着改属性

清空 src 就会看到 fallback 文字。variant、color_scheme、high_contrast 作用于这段替代文字的样式。

试着改属性

src

fallback

size

variant

color

radius

high_contrast

rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)
清空 src 会显示 fallback。size 为 "1"~"9"，radius 设为 "full" 就是圆形。
属性取值默认值用途
src图片地址无要显示的照片
fallback文字无没有照片或加载失败时显示的内容
size"1" ~ "9""3"大小
variant"solid" "soft""soft"替代文字的背景填充
color_schemeRadix 颜色名主题色替代文字的颜色
high_contrastTrue / FalseFalse加大替代文字与背景的对比
radius"none" "small" "medium" "large" "full"主题值圆角大小

大小

size 从 "1" 到 "9"，不传时为 "3"。列表里的小头像适合 "1"~"2"，个人资料页顶部适合 "6" 以上。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
    spacing="2",
    align="center",
    wrap="wrap",
)

variant 与颜色

variant 决定替代文字的背景。"solid" 用颜色填满，默认值 "soft" 则是浅色填充。color_scheme 不受主题影响，直接使用指定的颜色。

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", color_scheme="indigo"),
    rx.avatar(fallback="RX", color_scheme="cyan"),
    rx.avatar(fallback="RX", color_scheme="orange"),
    rx.avatar(fallback="RX", color_scheme="crimson"),
    spacing="2",
    wrap="wrap",
)

high_contrast=True 会加大替代文字与背景的对比。左列是默认，右列是高对比。

rx.grid(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="solid", high_contrast=True),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", variant="soft", high_contrast=True),
    rows="2",
    flow="column",
    spacing="2",
    width="max-content",
)

圆角

radius 忽略主题的圆角设置，单独为这个头像指定圆角。照片和替代文字都会应用。

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
    spacing="2",
)

照片加载失败时

fallback 是 src 加载失败时代替显示的内容。下面两个头像指向不存在的文件，所以显示的是替代文字。在 Reflex 0.10 中，fallback 只接受文字（str）。

rx.flex(
    rx.avatar(src="/no-such-photo.png", fallback="PC"),
    rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
    spacing="2",
)

完成订单

在卡片里把大头像、名字和账号、编辑按钮排成一行。照片加载失败时会显示 "RU"。

Reflex User

@reflexuser

rx.card(
    rx.flex(
        rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
        rx.flex(
            rx.text("Reflex User", weight="bold", size="4"),
            rx.text("@reflexuser", color_scheme="gray", size="2"),
            direction="column",
        ),
        rx.spacer(),
        rx.button("Edit Profile", variant="soft", size="2"),
        spacing="4",
        align="center",
        width="100%",
    ),
    max_width="420px",
)

工坊笔记

  • 用 rx.avatar(src=…) 指定照片，用 fallback=… 指定替代文字。两者都给最稳妥。

  • size 为 "1"~"9"（默认 "3"），radius="full" 就是圆形。

  • variant（solid · soft）、color_scheme、high_contrast 改变替代文字的样式。

  • src 加载失败时会自动显示 fallback。

← 上一课

数据展示 · Badge

下一课 →

数据展示 · Icon

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

收集项目：电子邮箱 · 用途：本课程的新课时和上线通知 · 保存期限：直到你要求删除。不会用于其他用途，也不会提供给他人。回复任意通知邮件，我们会立即删除。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

以纯文本显示，不支持链接和格式。

R

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明
한국어English日本語简体中文EspañolDeutsch

© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0

Built with Reflex