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 例

浮层

Popover

rx.popover.rootrx.popover.triggerrx.popover.contentrx.popover.close

官方文档

工坊订单

点击帖子下方的「评论」按钮时，弹出一个小窗口，让用户不用离开页面就能当场写一条简短评论。

rx.popover 是点击按钮后在它旁边浮出的小窗口。与工具提示不同，它在点击时打开，里面可以放输入框、按钮等可操作的内容。它由四个部件组成。

popover.root：包裹弹出框的所有部件。
popover.trigger：包裹点击后开关弹出框的按钮。
popover.content：打开时浮现的内容。
popover.close：包裹点击后关闭弹出框的按钮。

rx.popover.root(
    rx.popover.trigger(
        rx.button("Popover"),
    ),
    rx.popover.content(
        rx.flex(
            rx.text("Simple Example"),
            rx.popover.close(
                rx.button("Close"),
            ),
            direction="column",
            spacing="3",
        ),
    ),
)

试着改属性

位置和尺寸设置在 popover.content 上，是否为模态设置在 popover.root 上。改完值后点击 Open 查看效果。

试着改属性

text

size

side

align

modal

rx.popover.root(
    rx.popover.trigger(rx.button("Open")),
    rx.popover.content(
        rx.flex(
            rx.text("Simple Example"),
            rx.popover.close(rx.button("Close", size="1")),
            direction="column",
            spacing="3",
        ),
        size="2",
        side="bottom",
        align="center",
    ),
    modal=False,
)

size 会同时改变内边距和圆角。开启 modal 后，弹出框打开期间无法点击或滚动外部元素。

部件	属性	取值	用途
`root`	`open`	`True` / `False`	由 State 决定是否打开（受控），需配合 `on_open_change`
`root`	`default_open`	`True` / `False`	首次渲染时就打开（非受控）
`root`	`modal`	`True` / `False`	打开期间阻止外部操作，并对屏幕阅读器隐藏外部内容
`root`	`on_open_change`	事件	打开或关闭时触发，传入新的打开状态（bool）
`content`	`size`	`"1"` ~ `"4"`	内边距和圆角大小
`content`	`side` · `align`	位置名称	出现的方向与对齐位置（默认 `"bottom"`、`"center"`）
`content`	`side_offset` · `align_offset`	数字（px）	与按钮的间距；从对齐位置再偏移的距离
`content`	`avoid_collisions` · `collision_padding`	bool · 数字	碰到屏幕边缘时换位，以及边缘留白
`content`	`sticky` · `hide_when_detached`	`"partial"` `"always"` · bool	滚动时贴住的程度；按钮被遮住时隐藏
`content`	`on_open_auto_focus` · `on_close_auto_focus`	事件	打开时焦点移入内部、关闭时焦点回到按钮时
`content`	`on_escape_key_down` · `on_pointer_down_outside`	事件	按下 Esc 键、点击外部时
`content`	`on_focus_outside` · `on_interact_outside`	事件	焦点或操作移到外部时

trigger 和 close 没有专属属性，只接受通用事件（如 on_click）。

实际用法：评论窗口

弹出框里可以放任何内容。这是一个在头像旁放了输入框、复选框和发送按钮的评论窗口。用 popover.close 包裹发送按钮，点击的瞬间窗口就会关闭。宽度像 style={"width": 360} 这样直接设置在 content 上。

rx.popover.root(
    rx.popover.trigger(
        rx.button("Comment", variant="soft"),
    ),
    rx.popover.content(
        rx.flex(
            rx.avatar("2", fallback="RX", radius="full"),
            rx.box(
                rx.text_area(placeholder="Write a comment…", style={"height": 80}),
                rx.flex(
                    rx.checkbox("Send to group"),
                    rx.popover.close(rx.button("Comment", size="1")),
                    spacing="3",
                    margin_top="12px",
                    justify="between",
                ),
                flex_grow="1",
            ),
            spacing="3",
        ),
        style={"width": 360},
    ),
)

把 rx.inset(side="top") 作为 content 的第一个子组件，就能放一张去掉弹出框顶部内边距、一直铺到边缘的头图。

rx.popover.root(
    rx.popover.trigger(
        rx.button("Feedback", variant="classic"),
    ),
    rx.popover.content(
        rx.inset(
            side="top",
            background="url('https://picsum.photos/id/29/720/200') center/cover",
            height="100px",
        ),
        rx.box(
            rx.text_area(placeholder="Write a comment…", style={"height": 80}),
            rx.flex(
                rx.checkbox("Send to group"),
                rx.popover.close(rx.button("Comment", size="1")),
                spacing="3",
                margin_top="12px",
                justify="between",
            ),
            padding_top="12px",
        ),
        style={"width": 360},
    ),
)

用 State 值作为触发按钮文字

用 State 值作为按钮文字时，要像 rx.button(rx.text(State.值)) 这样先用 rx.text 包一层。官方文档提示，像 rx.button(State.值) 这样直接传入不会按预期工作。在下面选择一种语言，按钮文字就会随之改变。

class PopoverLanguageState(rx.State):
    language: str = "EN"

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


rx.popover.root(
    rx.popover.trigger(
        rx.button(rx.text(PopoverLanguageState.language), variant="outline"),
    ),
    rx.popover.content(
        rx.flex(
            rx.popover.close(rx.button("EN", size="1", variant="soft", on_click=PopoverLanguageState.set_language("EN"))),
            rx.popover.close(rx.button("KO", size="1", variant="soft", on_click=PopoverLanguageState.set_language("KO"))),
            rx.popover.close(rx.button("JA", size="1", variant="soft", on_click=PopoverLanguageState.set_language("JA"))),
            spacing="2",
        ),
    ),
)

打开与关闭时：on_open_change

popover.root 的 on_open_change 在打开时向事件处理器传入 True，关闭时传入 False。

Opened or closed: 0 times

Popover open: no

class PopoverEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", PopoverEventState.num_opens, " times"),
    rx.text("Popover open: ", rx.cond(PopoverEventState.opened, "yes", "no")),
    rx.popover.root(
        rx.popover.trigger(
            rx.button("Popover"),
        ),
        rx.popover.content(
            rx.flex(
                rx.text("Simple Example"),
                rx.popover.close(
                    rx.button("Close"),
                ),
                direction="column",
                spacing="3",
            ),
        ),
        on_open_change=PopoverEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

用 State 控制开关

同时绑定 open 和 on_open_change 后，铅笔按钮和点击外部照常工作，代码里也能关闭窗口。在下面改个名字再点 Rename，事件处理器会保存新值，然后用 self.open = False 关闭窗口。每次打开时，输入框都会重新填入当前的名字。

Untitled

class PopoverControlState(rx.State):
    open: bool = False
    name: str = "Untitled"
    draft: str = ""

    @rx.event
    def set_open(self, value: bool):
        self.open = value
        if value:
            self.draft = self.name

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

    @rx.event
    def rename(self):
        self.name = self.draft.strip() or "Untitled"
        self.open = False


rx.flex(
    rx.heading(PopoverControlState.name, size="4"),
    rx.popover.root(
        rx.popover.trigger(rx.icon_button(rx.icon("pencil"), variant="soft", size="1", aria_label="Rename")),
        rx.popover.content(
            rx.flex(
                rx.input(value=PopoverControlState.draft, on_change=PopoverControlState.set_draft),
                rx.button("Rename", size="1", on_click=PopoverControlState.rename),
                spacing="2",
            ),
        ),
        open=PopoverControlState.open,
        on_open_change=PopoverControlState.set_open,
    ),
    align="center",
    spacing="3",
)

完成订单

这是从帖子下方「评论」按钮打开的小评论窗口。设置 side="top" 让它向上打开，设置 align="start" 让它与按钮左端对齐。

Shipping is now free over $30.

rx.card(
    rx.text("Shipping is now free over $30.", size="2"),
    rx.popover.root(
        rx.popover.trigger(rx.button(rx.icon("message-circle"), "Comment", variant="ghost", size="1", margin_top="8px")),
        rx.popover.content(
            rx.flex(
                rx.text_area(placeholder="Write a comment…", rows="3"),
                rx.flex(
                    rx.popover.close(rx.button("Cancel", size="1", variant="soft", color_scheme="gray")),
                    rx.popover.close(rx.button("Post", size="1")),
                    spacing="2",
                    justify="end",
                ),
                direction="column",
                spacing="2",
            ),
            side="top",
            align="start",
            width="300px",
        ),
    ),
    max_width="360px",
)

工坊笔记

由 root · trigger · content · close 四个部件组成。点击 trigger 打开，点击 close 或外部关闭。
位置和尺寸设在 content 上（side、align、side_offset、size），是否模态设在 root 上（modal）。
用 State 值作为触发按钮文字时，要用 rx.text 包一层。
on_open_change 会传入新的打开状态（bool）。用 open 控制时，可以在事件处理器里关闭窗口。

← 上一课

浮层 · Tooltip

下一课 →

浮层 · Hover Card

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex