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 例

浮层

Dropdown Menu

rx.menu.rootrx.menu.triggerrx.menu.contentrx.menu.itemrx.menu.separatorrx.menu.subrx.menu.sub_triggerrx.menu.sub_content

官方文档

工坊订单

在文件列表每一行的末尾加一个「⋯」按钮，点击后展开菜单，可以选择复制、移动和更改状态。

下拉菜单是点击按钮后在其下方展开的选项列表。适合把不常用的操作收进一个按钮里，让界面更清爽。rx.menu 和 rx.dropdown_menu 是同一个东西，本页使用更短的 rx.menu。

menu.root：包裹菜单的所有部件。
menu.trigger：包裹点击后开关菜单的元素。
menu.content：打开时展开的面板。
menu.item：一个菜单项。可以用 shortcut 在右侧附上快捷键文字。
menu.separator：分隔菜单项的线。
menu.sub：包裹子菜单的所有部件。里面放 menu.sub_trigger（打开子菜单的菜单项）和 menu.sub_content（展开的子面板）。

rx.menu.root(
    rx.menu.trigger(
        rx.button("Options", variant="soft"),
    ),
    rx.menu.content(
        rx.menu.item("Edit", shortcut="⌘ E"),
        rx.menu.item("Duplicate", shortcut="⌘ D"),
        rx.menu.separator(),
        rx.menu.item("Archive", shortcut="⌘ N"),
        rx.menu.sub(
            rx.menu.sub_trigger("More"),
            rx.menu.sub_content(
                rx.menu.item("Move to project…"),
                rx.menu.item("Move to folder…"),
                rx.menu.separator(),
                rx.menu.item("Advanced options…"),
            ),
        ),
        rx.menu.separator(),
        rx.menu.item("Share"),
        rx.menu.item("Add to favorites"),
        rx.menu.separator(),
        rx.menu.item("Delete", shortcut="⌘ ⌫", color="red"),
    ),
)

试着改属性

菜单面板的外观和位置设置在 menu.content 上。改完值后点击 Options 查看效果。

试着改属性

variant

size

color

high_contrast

side

align

disabled

modal

rx.menu.root(
    rx.menu.trigger(rx.button("Options", variant="soft")),
    rx.menu.content(
        rx.menu.item("Edit", shortcut="⌘ E"),
        rx.menu.item("Duplicate", shortcut="⌘ D", disabled=False),
        rx.menu.separator(),
        rx.menu.item("Delete", shortcut="⌘ ⌫", color_scheme="red"),
        variant="solid",
        size="2",
        color_scheme="indigo",
        high_contrast=False,
        side="bottom",
        align="start",
    ),
    modal=True,
)

variant="solid" 会把鼠标所在的菜单项涂成深色，"soft" 则涂成浅色。disabled 的菜单项无法选择。

部件	属性	取值	用途
`root`	`open` · `default_open`	`True` / `False`	由 State 决定是否打开（受控）· 一开始就打开
`root`	`modal`	`True` / `False`	默认 `True`。打开期间阻止外部操作和滚动
`root`	`on_open_change`	事件	打开或关闭时触发，传入新的打开状态（bool）
`content`	`variant` · `size`	`"solid"` `"soft"` · `"1"` `"2"`	强调方式、尺寸
`content`	`color_scheme` · `high_contrast`	颜色名 · bool	菜单项的着色、对比度
`content`	`side` · `align` · `side_offset` · `align_offset`	位置	展开的方向与对齐位置
`content`	`loop`	`True` / `False`	用键盘从末尾回到开头
`content`	`avoid_collisions` · `collision_padding` · `sticky` · `hide_when_detached`	-	屏幕边缘处理（与 Popover 相同）
`item`	`shortcut`	字符串	右侧显示的快捷键文字（仅用于显示）
`item`	`color_scheme` · `disabled` · `text_value`	颜色 · bool · 字符串	菜单项颜色、禁止选择、键入文字查找时使用的文本
`item`	`on_select`	事件	用鼠标或键盘选中菜单项时
`sub`	`open` · `default_open` · `on_open_change`	-	子菜单的打开状态
`sub_trigger`	`disabled` · `text_value`	-	打开子菜单的菜单项
`sub_content`	`loop` · `side_offset` · `align_offset` 等	-	子面板的位置

content 和 sub_content 有 on_escape_key_down、on_pointer_down_outside、on_focus_outside、on_interact_outside 事件，content 还有 on_close_auto_focus。

选中菜单项时：on_select

用鼠标点击或用键盘选中菜单项时，会调用 on_select 并关闭菜单。把选中的值作为事件处理器的参数传入，就不必为每个菜单项单独写处理器。像官方文档的对话框示例那样用 on_click，鼠标和键盘也都会触发，但专门用于选择菜单项的事件是 on_select。

Selected: nothing yet

class DropdownPickState(rx.State):
    last: str = "nothing yet"

    @rx.event
    def pick(self, name: str):
        self.last = name


rx.flex(
    rx.menu.root(
        rx.menu.trigger(rx.button("Sort by", rx.icon("chevron-down"), variant="outline")),
        rx.menu.content(
            rx.menu.item("Name", on_select=DropdownPickState.pick("Name")),
            rx.menu.item("Date added", on_select=DropdownPickState.pick("Date added")),
            rx.menu.item("Size", on_select=DropdownPickState.pick("Size")),
            rx.menu.separator(),
            rx.menu.item("Custom…", disabled=True),
        ),
    ),
    rx.text("Selected: ", rx.text.strong(DropdownPickState.last)),
    spacing="3",
    align="center",
    wrap="wrap",
)

打开与关闭时：on_open_change

menu.root 的 on_open_change 在打开时传入 True，关闭时传入 False。

Opened or closed: 0 times

Dropdown menu open: no

class DropdownMenuEventState(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: ", DropdownMenuEventState.num_opens, " times"),
    rx.text("Dropdown menu open: ", rx.cond(DropdownMenuEventState.opened, "yes", "no")),
    rx.menu.root(
        rx.menu.trigger(
            rx.button("Options", variant="soft", size="2"),
        ),
        rx.menu.content(
            rx.menu.item("Edit", shortcut="⌘ E"),
            rx.menu.item("Duplicate", shortcut="⌘ D"),
            rx.menu.separator(),
            rx.menu.item("Archive", shortcut="⌘ N"),
            rx.menu.separator(),
            rx.menu.item("Delete", shortcut="⌘ ⌫", color="red"),
        ),
        on_open_change=DropdownMenuEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

从菜单打开对话框

如果把整个 rx.dialog.root 放进菜单项里，菜单一关闭，对话框也会跟着消失。因为对话框在菜单内部，只有菜单打开时才存在。

rx.menu.root(
    rx.menu.trigger(rx.icon("ellipsis-vertical")),
    rx.menu.content(
        rx.menu.item(
            rx.dialog.root(  # 不要这样写
                rx.dialog.trigger(rx.text("Edit")),
                rx.dialog.content(...),
            ),
        ),
    ),
)

正确的做法是把对话框放在菜单外面，用一个 State 字符串记住打开的是哪个窗口。菜单项只负责改变这个值，每个对话框通过 open=State.值 == "名称" 打开。关闭时，on_open_change 把值恢复为空字符串。

class DropdownDialogState(rx.State):
    which_dialog_open: str = ""

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

    @rx.event
    def delete(self):
        yield rx.toast("Deleted item")

    @rx.event
    def save_settings(self):
        yield rx.toast("Saved settings")


rx.vstack(
    rx.menu.root(
        rx.menu.trigger(rx.icon_button(rx.icon("menu"), variant="soft", aria_label="Menu")),
        rx.menu.content(
            rx.menu.item("Delete", on_click=DropdownDialogState.set_which_dialog_open("delete")),
            rx.menu.item("Settings", on_click=DropdownDialogState.set_which_dialog_open("settings")),
        ),
    ),
    rx.cond(
        DropdownDialogState.which_dialog_open,
        rx.text(DropdownDialogState.which_dialog_open, " dialog is open"),
    ),
    rx.alert_dialog.root(
        rx.alert_dialog.content(
            rx.alert_dialog.title("Are you Sure?"),
            rx.alert_dialog.description(
                "This action cannot be undone. Are you sure you want to delete this item?",
                margin_bottom="20px",
            ),
            rx.hstack(
                rx.alert_dialog.action(
                    rx.button("Delete", color_scheme="red", on_click=DropdownDialogState.delete),
                ),
                rx.spacer(),
                rx.alert_dialog.cancel(rx.button("Cancel")),
            ),
        ),
        open=DropdownDialogState.which_dialog_open == "delete",
        on_open_change=DropdownDialogState.set_which_dialog_open(""),
    ),
    rx.dialog.root(
        rx.dialog.content(
            rx.dialog.title("Settings"),
            rx.dialog.description("Set your settings in this settings dialog.", margin_bottom="20px"),
            rx.dialog.close(
                rx.button("Close", on_click=DropdownDialogState.save_settings),
            ),
        ),
        open=DropdownDialogState.which_dialog_open == "settings",
        on_open_change=DropdownDialogState.set_which_dialog_open(""),
    ),
    align="center",
)

完成订单

给每行末尾的「⋯」按钮挂上菜单。移动和更改状态归入子菜单，选中的值通过 on_select 写入 State，从而改变该行里的文字。按钮位于行的最右端，所以面板用 align="end" 对齐。

Q3 report

Inbox · Draft

class DropdownRowState(rx.State):
    status: str = "Draft"
    folder: str = "Inbox"

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

    @rx.event
    def move(self, folder: str):
        self.folder = folder

    @rx.event
    def duplicate(self):
        return rx.toast("Duplicated Q3 report")


rx.flex(
    rx.icon("file-text", color=rx.color("gray", 10)),
    rx.box(
        rx.text("Q3 report", weight="bold"),
        rx.text(DropdownRowState.folder, " · ", DropdownRowState.status, size="1", color_scheme="gray"),
    ),
    rx.spacer(),
    rx.menu.root(
        rx.menu.trigger(rx.icon_button(rx.icon("ellipsis"), variant="ghost", color_scheme="gray", aria_label="More actions")),
        rx.menu.content(
            rx.menu.item("Duplicate", shortcut="⌘ D", on_select=DropdownRowState.duplicate),
            rx.menu.sub(
                rx.menu.sub_trigger("Move to"),
                rx.menu.sub_content(
                    rx.menu.item("Inbox", on_select=DropdownRowState.move("Inbox")),
                    rx.menu.item("Projects", on_select=DropdownRowState.move("Projects")),
                    rx.menu.item("Archive", on_select=DropdownRowState.move("Archive")),
                ),
            ),
            rx.menu.sub(
                rx.menu.sub_trigger("Status"),
                rx.menu.sub_content(
                    rx.menu.item("Draft", on_select=DropdownRowState.set_status("Draft")),
                    rx.menu.item("Published", on_select=DropdownRowState.set_status("Published")),
                ),
            ),
            rx.menu.separator(),
            rx.menu.item("Delete", shortcut="⌘ ⌫", color_scheme="red", disabled=True),
            align="end",
        ),
    ),
    spacing="3",
    align="center",
    padding="8px 12px",
    border=f"1px solid {rx.color('gray', 5)}",
    border_radius="8px",
    max_width="420px",
)

工坊笔记

rx.menu = rx.dropdown_menu。root > trigger + content > item · separator · sub(sub_trigger, sub_content)。
选中菜单项时会调用 on_select 并关闭菜单。值作为事件处理器的参数传入。
shortcut 只显示文字。真正的快捷键功能需要另外实现。
外观和位置设在 content 上（variant、size、color_scheme、side、align）。
要从菜单打开对话框，就把对话框放在菜单外面，用 State 打开。

← 上一课

浮层 · Drawer

下一课 →

浮层 · Context Menu

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex