ReflexKR

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

其他工具

Theme

rx.themerx.theme_panel

官方文档

工坊订单

整个网站保持不变，只把一个活动横幅盒子改成青绿色、胶囊形圆角。

rx.theme 是决定 Radix 组件颜色、圆角和尺寸比例的主题提供者。通常在整个应用上设置一次；在页面里再包一层，就只会把里面的部分覆盖成另一套主题。本页的示例都是这种覆盖，所以网站其他地方不会变。

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

试着改属性

这里用 rx.theme 包住了一张卡片。切换主题，按钮、徽章、开关、卡片会一起跟着变。

试着改属性

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color 是强调色，gray_color 是灰色的色调，radius 是圆角，scaling 是整体尺寸比例。打开 has_background，主题区域会涂上背景色。

属性	取值	默认值	用途
`accent_color`	26 种 Radix 颜色名	`"indigo"`	按钮·链接·开关等的强调色
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	灰色系。auto 是与强调色相配的灰色
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	所有组件的圆角
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	文字·间距·组件的尺寸比例
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	卡片·菜单这类面板的背景是否半透明
`has_background`	`True` / `False`	`True`	是否给主题区域涂背景色
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	浅色·深色模式。只在应用级使用（见下文）
`default_open` (theme_panel)	`True` / `False`	`False`	主题面板一开始就打开

给整个应用设置主题

官方文档用 rx.App(theme=rx.theme(...)) 来说明，但在 Reflex 0.10 中，这个参数被标为“旧的快捷方式”，正式的位置是 rxconfig.py 里的 RadixThemesPlugin(theme=...)。本站也用这种方式设置了 accent_color="indigo"、gray_color="slate"、radius="large"。它会改变整个网站，所以这里只看代码。

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

appearance 用在应用级主题里时，决定默认的颜色模式（浅色·深色）。在 0.10 中，页面内 rx.theme 上的 appearance 会在渲染时被去掉，所以不能用它只把一部分变暗。

只覆盖一部分

只有被 rx.theme 包住的地方会应用新主题，没包住的部分保持应用主题不变。没给的属性会继承外层主题。直接给 rx.theme 的 padding 之类的样式会被忽略，所以间距要加在里面的 rx.box 上。

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

主题面板

rx.theme_panel() 是浮在屏幕右上角的主题编辑器。点选颜色和圆角试出满意的效果后，再把这些值抄到代码里的 rx.theme 上。它默认是关闭的，default_open=True 时一开始就打开。它是修改整个网站主题的工具，所以本页只以代码展示。

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

完成订单

只用 rx.theme 包住横幅盒子，改成青绿色、胶囊形圆角和稍大的比例。里面的 callout 和按钮不用另外设颜色，也会跟随主题。

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

工坊笔记

整个应用的主题用 rxconfig.py 里的 RadixThemesPlugin(theme=rx.theme(...))。rx.App(theme=) 在 0.10 中是旧的快捷方式。
页面内的 rx.theme 只覆盖被包住的部分，没给的值会继承。
accent_color · gray_color · radius · scaling · panel_background · has_background。
appearance 只在应用级使用。给 rx.theme 的样式会被忽略，要加在里面的盒子上。
用 rx.theme_panel() 挑选，再把选好的值抄进代码。

← 上一课

HTML 元素 · SVG

下一课 →

其他工具 · Skeleton

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex