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 例

排版

Text

rx.textrx.text.em

官方文档

工坊订单

请在商品卡片里放上加粗的商品名、小号灰色的说明，以及放大突出的价格。

rx.text 是在页面上放置文字最基础的组件。默认渲染为 <span> 标签，字号、粗细、对齐和颜色都通过属性设置。说明文字、标签、数字等所有不是标题的文字都用它。

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

试着改属性

文字的外观由下面这些属性决定。align 只有在文字占满一整行的块级元素（p、div）上才看得出效果。

试着改属性

The quick brown fox jumps over the lazy dog.

label

as_

size

weight

align

trim

color

high_contrast

rx.text("The quick brown fox jumps over the lazy dog.", as_="p", size="3", weight="regular", align="left", trim="normal", color_scheme="gray", high_contrast=False)

把 as_ 改成 span 后，align 就不再生效了，因为 span 只占文字本身的宽度。

属性	取值	默认值	用途
`as_`	`"p"` `"label"` `"div"` `"span"` `"b"` `"i"` `"u"` `"abbr"` `"cite"` `"del"` `"em"` `"ins"` `"kbd"` `"mark"` `"s"` `"samp"` `"sub"` `"sup"`	`"span"`	实际生成的 HTML 标签，外观不变
`size`	`"1"` ~ `"9"`	继承	字号、行高和字间距
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	继承	粗细
`align`	`"left"` `"center"` `"right"`	继承	在块内的对齐方式
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	裁掉文字上下由行高带来的留白
`color_scheme`	Radix 颜色名	主题色	文字颜色
`high_contrast`	`True` / `False`	`False`	加大与背景的对比度
`as_child`	`True` / `False`	`False`	直接使用子元素，只套用文字样式

size、weight、align、trim 也可以传入按屏幕宽度区分的值（{"initial": "2", "md": "4"}）。事件只有 on_click 这类基础事件。

as_：只改语义

as_ 只改变生成的标签。下面四行分别是 p、label、div、span，外观却完全一样。段落用 p，输入框的名称用 label，按含义选对标签，屏幕阅读器和搜索引擎就能更好地理解内容。

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

rx.flex(
    rx.text("This is a ", rx.text.strong("paragraph"), " element.", as_="p"),
    rx.text("This is a ", rx.text.strong("label"), " element.", as_="label"),
    rx.text("This is a ", rx.text.strong("div"), " element.", as_="div"),
    rx.text("This is a ", rx.text.strong("span"), " element.", as_="span"),
    direction="column",
    spacing="3",
)

字号、粗细、对齐

size 调的不只是字号，还会一起调整行高和字间距。字越大，相对的行高和字间距就越小。长篇正文适合 2~~4，按钮旁的标签这类 UI 文字适合 1~~3。

Size 1: captions and hints

Size 2: UI labels

Size 3: body text

Size 5: lead paragraph

Size 7: big numbers

Size 9: hero

rx.flex(
    rx.text("Size 1: captions and hints", size="1"),
    rx.text("Size 2: UI labels", size="2"),
    rx.text("Size 3: body text", size="3"),
    rx.text("Size 5: lead paragraph", size="5"),
    rx.text("Size 7: big numbers", size="7"),
    rx.text("Size 9: hero", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.text("Light", weight="light", as_="div"),
    rx.text("Regular", weight="regular", as_="div"),
    rx.text("Medium", weight="medium", as_="div"),
    rx.text("Bold", weight="bold", as_="div"),
    rx.separator(),
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

trim：对齐盒子里的留白

文字上下会附带一段与行高相应的看不见的留白，所以即使设了同样的 padding，上下看起来也比左右宽。trim 就是用来裁掉这段留白的："start" 裁上方，"end" 裁下方，"both" 两边都裁。在卡片这类带边框的盒子里差别最明显。

Without trim

Typography relates font size, line height and line width.

With trim

Typography relates font size, line height and line width.

rx.flex(
    rx.box(
        rx.heading("Without trim", as_="h2", size="3", margin_bottom="4px"),
        rx.text("Typography relates font size, line height and line width."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h2", size="3", margin_bottom="4px", trim="start"),
        rx.text("Typography relates font size, line height and line width.", trim="end"),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

颜色与对比度

color_scheme 用指定的颜色代替主题默认色。再加上 high_contrast=True，会在同一色系里换成更深的文字，与背景区分得更清楚。左边是默认，右边是高对比度。

indigo

crimson

orange

rx.grid(
    rx.text("indigo", color_scheme="indigo"),
    rx.text("indigo", color_scheme="indigo", high_contrast=True),
    rx.text("crimson", color_scheme="crimson"),
    rx.text("crimson", color_scheme="crimson", high_contrast=True),
    rx.text("orange", color_scheme="orange"),
    rx.text("orange", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="2",
)

与其他文字组件混用

在 rx.text 的子元素里混入字符串和 rx.link、rx.text.em、rx.code、rx.text.kbd，就能让一句话里的某一部分显示得不一样。

浏览器会把连续的空格合并成一个。如果需要原样显示空格，就加上 CSS 属性 white_space="pre"。对比一下下面的第二行和第三行。

Look, such a helpful link, an italic emphasis, a piece of computer code, and a hotkey Shift + A within the text.

This is not pre formatted

This is pre formatted

rx.flex(
    rx.text(
        "Look, such a helpful ",
        rx.link("link", href="#"),
        ", an ",
        rx.text.em("italic emphasis"),
        ", a piece of computer ",
        rx.code("code"),
        ", and a hotkey ",
        rx.text.kbd("Shift + A"),
        " within the text.",
        size="4",
    ),
    rx.text("This is not pre     formatted"),
    rx.text("This is pre     formatted", white_space="pre"),
    direction="column",
    spacing="3",
)

与复选框排成一行

在 as_="label" 的 rx.text 里放入复选框、单选框或开关，控件会对齐到文字第一行的高度，文字换成多行也一样。因为它是 label，点击文字也能切换复选框。

I understand that these documents are confidential and cannot be shared with a third party.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
            spacing="2",
        ),
        as_="label",
        size="3",
    ),
    max_width="300px",
)

完成订单

名称加粗，说明用小号灰色，价格放大并加上颜色，分成三个层次。卡片最上和最下的文字加上 trim，让留白均匀一致。

Linen Shirt

Breathable linen, relaxed fit. Machine washable.

$49.00

rx.card(
    rx.flex(
        rx.text("Linen Shirt", size="4", weight="bold", trim="start"),
        rx.text("Breathable linen, relaxed fit. Machine washable.", size="2", color_scheme="gray"),
        rx.text("$49.00", size="6", weight="bold", color_scheme="indigo", trim="end"),
        direction="column",
        spacing="2",
    ),
    max_width="320px",
)

工坊笔记

rx.text 默认是 span。用 as_ 选择 p、label、div 等符合语义的标签（外观不变）。
size "1"~"9" 连行高和字间距一起调整。正文 2~4，UI 标签 1~3。
align 只在 p、div 这类块级元素上可见。用 trim 对齐盒子里的上下留白。
color_scheme 设颜色，high_contrast 加对比度。保留空格用 white_space="pre"。
在子元素里混入 rx.link、rx.code、rx.text.em、rx.text.kbd 来修饰一句话。

← 上一课

布局 · Fragment

下一课 →

排版 · Heading

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex