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 例

排版

Code

rx.code

官方文档

工坊订单

请把安装说明里的命令和文件名用等宽字体区分出来。

rx.code 用等宽字体和浅色背景显示句子里的短代码、命令和文件名，渲染为 HTML <code> 标签。需要多行代码和语法高亮时，请用 rx.code_block。

console.log()

rx.code("console.log()")

试着改属性

用 variant 改变背景和边框样式，用 size 和 weight 调整文字，用 color_scheme 换颜色。

试着改属性

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost 没有背景，只改变字体和颜色。high_contrast 会让文字更深。

属性	取值	默认值	用途
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	背景与边框样式
`size`	`"1"` ~ `"9"`	继承	字号
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	继承	粗细
`color_scheme`	Radix 颜色名	主题色	颜色
`high_contrast`	`True` / `False`	`False`	让文字更深

Reflex 0.10 的 variant 类型里还包含 "classic" 和 "surface"，但 Radix 的 Code 只为上面四种定义了样式。事件只有基础事件。

四种 variant 与对比度

左列是默认，右列是 high_contrast=True。正文里用 soft 最稳妥；需要醒目时用 solid；不想要背景时用 ghost。

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

大小与粗细

size 为 "1"~"9"，越大相对行高和字间距越小。放进句子里时，如果不设 size，就沿用外层文字的大小。

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

颜色

用 color_scheme 换掉主题色。按含义来选：错误信息里的代码用 red，中性的文件名用 gray。

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

放进句子里

在 rx.text 的子元素里把字符串和 rx.code 混在一起，代码就会出现在句子中间。大小沿用外层 rx.text 的 size。

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

完成订单

命令用默认的 soft，文件名用灰色 outline 来区分。提示框是 rx.callout。

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

工坊笔记

rx.code("…") 用于句子里的短代码。多行、语法高亮用 rx.code_block。
variant：solid · soft（默认）· outline · ghost。用 high_contrast 加深。
不设 size 时，沿用外层 rx.text 的大小。
color_scheme 按含义选（错误用 red，中性用 gray）。

← 上一课

排版 · Link

下一课 →

排版 · Markdown

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex