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 例

展开与切换

Tabs

rx.tabs.rootrx.tabs.listrx.tabs.triggerrx.tabs.content

官方文档

工坊订单

请在商品页面上把“描述”“规格”“评价”分成标签页，一次只显示一个。

标签页把高度相同、彼此相关的几组内容叠放在一起，一次只显示一组。它由四个部件组成。

rx.tabs.root：包住整体，并记住当前打开的是哪个标签页。
rx.tabs.list：放置标签按钮的那一行。
rx.tabs.trigger：点击后打开对应标签页的按钮。value 就是它的名字。
rx.tabs.content：标签页的内容。点击了 value 相同的 trigger 时显示。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab1",
)

试着改属性

orientation 和 activation_mode 写在 root 上，size 和 loop 写在 list 上，color_scheme 和 disabled 写在 trigger 上。点击一个标签后，试试用方向键在标签间移动。

试着改属性

Make changes to your account

orientation

activation_mode

size

loop

color

disable_settings

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Account", value="account", color_scheme="indigo"),
        rx.tabs.trigger("Documents", value="documents", color_scheme="indigo"),
        rx.tabs.trigger("Settings", value="settings", color_scheme="indigo", disabled=False),
        size="2",
        loop=True,
    ),
    rx.box(
        rx.tabs.content(rx.text("Make changes to your account"), value="account"),
        rx.tabs.content(rx.text("Update your documents"), value="documents"),
        rx.tabs.content(rx.text("Edit your personal profile"), value="settings"),
        padding="12px",
    ),
    default_value="account",
    orientation="horizontal",
    activation_mode="automatic",
)

activation_mode 为 manual 时，方向键只移动焦点，要按 Enter 或 Space 才会打开标签页。关闭 loop 后，方向键到头就会停住。

部件	属性	取值	用途
`root`	`default_value`	trigger 的 value	一开始打开的标签页（非受控）
`root`	`value` + `on_change`	State 值、事件	用 State 管理打开的标签页（受控）
`root`	`orientation`	`"horizontal"`（默认） `"vertical"`	标签栏的方向和方向键的方向
`root`	`activation_mode`	`"automatic"`（默认） `"manual"`	焦点移过去就打开，还是要按下才打开
`list`	`size`	`"1"` `"2"`（默认）	标签按钮大小
`list`	`loop`	`True`（默认） / `False`	到头时方向键是否回到开头
`trigger`	`value`	字符串（唯一）	这个标签页的名字
`trigger`	`disabled`	`True` / `False`	禁止点击
`trigger`	`color_scheme`	Radix 颜色名	打开时下划线的颜色
`content`	`value`	与 trigger 相同的字符串	属于哪个标签页的内容
`content`	`force_mount`	`True` / `False`	关闭时也不从页面上移除

一开始打开的标签页

把 trigger 的 value 传给 default_value，那个标签页一开始就是打开的。不传的话，开始时没有任何标签页打开，所以通常一定要传。

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab2",
)

纵向标签页

设置 orientation="vertical" 后，标签栏会竖着立在左侧。改变的不只是显示方向，键盘方向也会变，要用上下方向键切换标签（横向时是左右方向键）。纵向时每个 trigger 都必须有对应的 content，缺了的话标签栏的宽度会跳动。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1", padding_left="16px"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2", padding_left="16px"),
    default_value="tab1",
    orientation="vertical",
)

用 State 管理打开的标签页（受控）

给 value 传 State 值，并在 on_change 里修改这个值，服务器就知道打开的是哪个标签页。这样可以用按钮打开别的标签页，或在切换标签时做其他事情。on_change 会传入新打开标签页的 value。

tab1 selected (changed 0 times)

items on tab 1

class TabsPickState(rx.State):
    value: str = "tab1"
    changes: int = 0

    @rx.event
    def go_tab2(self):
        self.value = "tab2"

    @rx.event
    def change_tab(self, val: str):
        self.value = val
        self.changes += 1


rx.vstack(
    rx.text(TabsPickState.value, " selected (changed ", TabsPickState.changes, " times)"),
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Tab 1", value="tab1"),
            rx.tabs.trigger("Tab 2", value="tab2"),
        ),
        rx.tabs.content(rx.text("items on tab 1"), value="tab1"),
        rx.tabs.content(rx.text("items on tab 2"), value="tab2"),
        value=TabsPickState.value,
        on_change=TabsPickState.change_tab,
        width="100%",
    ),
    rx.button("Jump to Tab 2", on_click=TabsPickState.go_tab2, size="1", variant="soft"),
)

标签按钮（trigger）

每个 trigger 的 value 必须互不相同，并与相同值的 content 配对。disabled=True 禁止点击，color_scheme 改变打开时下方下划线的颜色。trigger 里也可以放图标之类的组件。

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2", color_scheme="green"),
        rx.tabs.trigger("Tab 3", value="tab3", disabled=True),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    rx.tabs.content(rx.text("item on tab 3"), value="tab3"),
    default_value="tab1",
)

标签内容（content）与 force_mount

关闭的标签页的 content 会从页面上移除，所以像输入框里写的文字这类只存在于浏览器里的东西，切换标签后就会消失。设置 force_mount=True 后，关闭时也会保留而不移除。这时关闭的标签页也会照样显示，所以要同时加上在 data-state='inactive' 时隐藏的样式。用动画库自己控制打开、关闭效果时也会用到它。

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Write", value="write"),
        rx.tabs.trigger("Preview", value="preview"),
    ),
    rx.tabs.content(
        rx.el.input(placeholder="Type, then switch tabs", default_value="", padding="6px", margin_top="8px"),
        value="write",
        force_mount=True,
        style={"&[data-state='inactive']": {"display": "none"}},
    ),
    rx.tabs.content(rx.text("The input on the other tab keeps its text.", margin_top="8px"), value="preview"),
    default_value="write",
)

完成订单

给标签按钮加上图标，各个内容里分别放了文字、数据列表和徽章。

A light, waterproof jacket for everyday rain.

rx.card(
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger(rx.icon("file-text", size=14), "Description", value="desc"),
            rx.tabs.trigger(rx.icon("ruler", size=14), "Specs", value="specs"),
            rx.tabs.trigger(rx.icon("star", size=14), "Reviews", value="reviews"),
        ),
        rx.tabs.content(
            rx.text("A light, waterproof jacket for everyday rain.", size="2"),
            value="desc",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.data_list.root(
                rx.data_list.item(rx.data_list.label("Weight"), rx.data_list.value("320 g")),
                rx.data_list.item(rx.data_list.label("Material"), rx.data_list.value("Nylon")),
            ),
            value="specs",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.hstack(rx.badge("4.8", color_scheme="amber"), rx.text("from 214 reviews", size="2")),
            value="reviews",
            padding_top="12px",
        ),
        default_value="desc",
    ),
    max_width="420px",
)

工坊笔记

用 value 把 tabs.root > tabs.list > tabs.trigger(value=…) 与 tabs.content(value=…) 配对。
default_value 指定一开始打开的标签页（非受控），value + on_change 交给 State 管理（受控）。
orientation 同时改变显示方向和方向键方向。纵向时每个 trigger 都要有 content。
list：size · loop，trigger：disabled · color_scheme，content：force_mount。

← 上一课

数据展示 · Moment

下一课 →

展开与切换 · Accordion

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex