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 例

展开与切换

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

官方文档

工坊订单

请把客服中心的“常见问题”折叠起来只显示问题，点击后再展开答案。

手风琴把标题竖着叠放，点击标题就会在下方展开对应的内容。常见问题、设置分组这类全部展开会太长的内容，就用它折叠起来。在 rx.accordion.root 里放入 rx.accordion.item，每个 item 设置 header（标题）和 content（内容）。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    width="300px",
)

试着改属性

这些都是写在 root 上的属性。把 type 改成 multiple，就能同时展开多个条目。

试着改属性

type

collapsible

variant

color

radius

show_dividers

disabled

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

关闭 collapsible 后，再次点击已展开的条目也不会收起。variant 和 color_scheme 是底色样式和颜色。

部件	属性	取值	用途
`root`	`type`	`"single"`（默认） `"multiple"`	一次只展开一个，还是可以展开多个
`root`	`collapsible`	`True` / `False`	能否再次点击收起已展开的条目
`root`	`default_value`	item 的 value（multiple 时为列表）	一开始展开的条目
`root`	`value` + `on_value_change`	State 值、事件	用 State 管理展开的条目
`root`	`disabled`	`True` / `False`	禁止点击所有条目
`root`	`orientation`	`"vertical"`（默认） `"horizontal"`	键盘方向键的方向
`root`	`variant`	`"classic"`（默认） `"soft"` `"surface"` `"outline"` `"ghost"`	底色样式
`root`	`color_scheme` · `radius`	Radix 颜色名、圆角值	颜色与圆角
`root`	`show_dividers`	`True` / `False`	条目之间的分隔线
`root`	`duration` · `easing`	毫秒（默认 250）、CSS easing	展开和收起的动画
`item`	`header` · `content`	文字或组件	标题与内容
`item`	`value`	字符串	这个条目的名字。不传时为随机值
`item`	`disabled`	`True` / `False`	只禁止点击这个条目

展开多个

type 的默认值 "single" 一次只展开一个，展开另一个时前一个会收起。设为 "multiple" 时可以同时展开多个条目。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="multiple",
    collapsible=True,
    width="300px",
)

一开始展开的条目

把 item 的 value 传给 default_value，那个条目一开始就是展开的。所以要亲自给 item 加上 value（不加的话 Reflex 会生成随机值）。type="multiple" 时要传 ["item_1", "item_3"] 这样的列表。

The second accordion item's content

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content", value="item_1"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content", value="item_2"),
    rx.accordion.item(header="Third item", content="The third accordion item's content", value="item_3"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

再次收起与禁用

collapsible=True 时，可以再次点击已展开的条目把它收起。为 False 时，一旦展开过，之后总会有一个条目是展开的。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

把 disabled=True 写在 root 上会禁用所有条目，写在 item 上则只禁用那个条目。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

方向

orientation 不改变外观，只改变键盘操作。默认的 "vertical" 用上下方向键、"horizontal" 用左右方向键在标题之间移动。点击下面的某个标题后，按方向键试试。

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

样式与颜色

variant 有五种。classic 用主题色浓重填充，soft 浅色填充，surface 和 outline 画边框，ghost 不画底色。

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_scheme 不受主题影响，单独决定手风琴的颜色。

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

用 State 管理展开的条目

给 value 传 State 值，并在 on_value_change 里修改它，服务器就知道展开的是哪个条目。也可以用按钮展开特定条目或全部收起。全部收起时传来的是空字符串。content 里不仅能放文字，还能放按钮之类的组件。

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

    @rx.event
    def change_accordion(self, value: str | list[str]):
        self.value = value if isinstance(value, str) else ""

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


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    rx.accordion.root(
        rx.accordion.item(header="Is it accessible?", content=rx.button("Test button"), value="item_1"),
        rx.accordion.item(header="Is it unstyled?", content="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

用部件自己组装

header= 和 content= 是快捷写法。Reflex 0.10 还提供了组成它们的部件 rx.accordion.header、rx.accordion.trigger（点击区域）、rx.accordion.icon（展开箭头）、rx.accordion.content，可以作为 item 的子元素自己组装。想在标题里加图标等细致调整外观时使用。官方文档页面里没有介绍这些部件。

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

完成订单

设为 multiple，让多个问题可以同时展开查看，再用 ghost 和分隔线做轻量的装饰。

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

工坊笔记

在 accordion.root 里放入 accordion.item(header=…, content=…)。
type：single（默认）· multiple，collapsible=True 时再次点击会收起。
要用 default_value 或 value，就得亲自给 item 加上 value。受控用 value + on_value_change。
orientation 只改变键盘方向。variant 有五种，另有 color_scheme、show_dividers。
更细致的外观用 header · trigger · icon · content 部件组装（0.10）。

← 上一课

展开与切换 · Tabs

下一课 →

展开与切换 · Segmented Control

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex