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

公式ドキュメント

工房の注文書

ファイル一覧の各行の末尾に「⋯」ボタンを付け、押すと複製・移動・ステータス変更を選べるメニューが開くようにしてください。

ドロップダウンメニューは、ボタンを押すとその下に広がる選択肢のリストです。あまり使わない操作をボタン1つの裏にまとめて、画面をすっきりさせたいときに使います。rx.menuとrx.dropdown_menuは同じもので、このページでは短いrx.menuを使います。

menu.root：メニューのすべてのパーツを包みます。
menu.trigger：押すとメニューを開閉する要素を包みます。
menu.content：開いたときに広がるパネルです。
menu.item：メニューの項目1つです。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の文字列1つで覚えておきます。項目はその値を変えるだけで、各ダイアログは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

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。