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 Block

rx.code_blockrx.code_block.themes

官方文档

工坊订单

请在安装指南页面上，把“安装命令”和“第一个应用的代码”放进带语法高亮的代码框，并加上复制按钮。

rx.code_block 按语言为多行代码着色显示。把保留了换行和缩进的字符串作为第一个参数传入，再用 language 指定语言。行内的短代码用 rx.code。本课程所有示例代码也都是用 rx.code_block 显示的。

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

试着改属性

换一种语言，同样的文字会以不同方式着色。也可以在下面的输入框里写一行别的代码试试。

试着改属性

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

language 决定着色规则。打开 show_line_numbers，左侧会出现行号。

属性	取值	默认值	用途
第一个参数（`code`）	字符串	必填	要显示的代码
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	着色规则
`theme`	`rx.code_block.themes.…`	亮色时 `one_light`，暗色时 `one_dark`	配色方案
`show_line_numbers`	`True` / `False`	`False`	行号
`starting_line_number`	整数	`1`	第一行的行号
`wrap_long_lines`	`True` / `False`	`False`	长行自动换行显示
`can_copy`	`True` / `False`	`False`	右上角的复制按钮
`copy_button`	组件	无	代替默认复制按钮的按钮
`custom_style`	dict	无	代码框的样式
`code_tag_props`	dict	无	传给内部 `code` 标签的属性

主题

theme 接收 rx.code_block.themes 里的值，不接受 "dracula" 这样的字符串。不传时，亮色模式自动使用 one_light，暗色模式自动使用 one_dark。

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

要为每种模式亲自挑选主题，就把亮色和暗色时的值传给 rx.color_mode_cond。

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

如果想用 State 里的字符串选择主题，因为不能直接传字符串，要用 rx.match 把它对应到主题值。除此之外还有 nord、vs_dark、ghcolors、night_owl、material_dark 等四十多种。

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

行号与长行

starting_line_number 决定第一行的行号，只展示长文件的一部分时用来对上原来的行号。wrap_long_lines=True 会把横向溢出的行折到下一行。

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

复制按钮与样式

设置 can_copy=True，右上角会出现复制按钮，点击后代码进入剪贴板。官方文档的属性表里没有它，但 Reflex 0.10 确实有这个属性。要改按钮的样子，就把自己做的按钮传给 copy_button。

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

width、font_size 等样式属性和 custom_style 作用于代码框。要单独给内部 code 标签的设置，通过 code_tag_props 传入。

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

完成订单

安装命令用 bash 显示，第一个应用的代码用带行号的 python 显示，两者都加上复制按钮。

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

工坊笔记

用 rx.code_block("代码", language="python") 生成着色的代码框。
theme 写 rx.code_block.themes.名字。不能用字符串，要用 State 选择时用 rx.match。
用 show_line_numbers · starting_line_number · wrap_long_lines 处理行。
can_copy=True 加复制按钮（0.10 新增，文档表里没有），copy_button 替换按钮。

← 上一课

数据展示 · Data List

下一课 →

数据展示 · Progress

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex