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

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 例

数据展示

Badge

rx.badge

官方文档

工坊订单

请在订单列表每一行旁边贴上“已付款”“待处理”“失败”这样的状态，让人一眼就能看清。

rx.badge 是用来简短标示条目状态或分类的小标签。像 "New"、"Paid"、"Beta" 这样用一两个词醒目提示时就用它。把文字作为第一个参数传入，它就会原样出现在徽章里。

New

rx.badge("New")

试着改属性

徽章的外观由五个属性决定。改动取值，徽章和代码会一起变化。

试着改属性

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variant 选择填充方式，size 选择大小，color_scheme 选择颜色。high_contrast 会加大文字与背景的对比。

属性	取值	默认值	用途
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	填充方式，solid 最醒目
`size`	`"1"` `"2"` `"3"`	`"1"`	大小与内边距
`color_scheme`	Radix 颜色名	主题色	承载状态含义的颜色
`high_contrast`	`True` / `False`	`False`	加大文字与背景的对比
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	主题值	圆角大小

大小

size 同时决定大小和内边距。官方文档正文只写了 "1" 和 "2"，但 Reflex 0.10 也接受 "3"。

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

四种 variant

solid 用颜色填满，soft 是浅色背景，surface 是浅色背景加边框，outline 只画边框。什么都不传时是 soft。

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

用颜色区分含义

color_scheme 决定这个徽章的颜色，与整站主题色无关。成功用 green、警告用 amber、失败用 red，让颜色带上含义，读文字之前就能看出状态。

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

对比与圆角

high_contrast=True 会把文字颜色加深、加大对比。上面一行是默认，下面一行是高对比。

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radius 忽略主题的圆角设置，单独为这个徽章指定圆角。胶囊形状用 "full"。

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

搭配图标

徽章里不仅能放文字，也能放其他组件。可以像官方文档那样用 rx.flex 把图标和文字并排，也可以直接依次作为子元素传入。

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

随 State 值变化的徽章

文字和颜色都可以接收 State 值。颜色用 rx.match 按状态挑选。

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

完成订单

在订单号旁边贴上状态徽章。已结束的事（退款）用 outline 和灰色弱化处理。

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

工坊笔记

用 rx.badge("文字") 创建，用于简短的状态或分类标示。
variant：solid · soft（默认）· surface · outline。
size 为 "1"~"3"（文档正文只写了 1 和 2），radius 单独指定圆角。
让 color_scheme 承载含义；要随 State 值变化时用 rx.match 挑选。
子元素可以放 rx.icon 或 rx.flex，让图标和文字一起显示。

← 上一课

表单 · Upload

下一课 →

数据展示 · Avatar

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex