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

オーバーレイ

Dialog

rx.dialog.rootrx.dialog.triggerrx.dialog.contentrx.dialog.titlerx.dialog.descriptionrx.dialog.close

公式ドキュメント

工房の注文書

会員カードの「プロフィールを編集」ボタンを押すと画面中央にウィンドウが開き、名前とメールアドレスを直して保存できるようにしてください。

rx.dialogは、画面の中央に開くモーダルウィンドウです。開いているあいだは背後の画面が暗くなって押せなくなるので、ユーザーはウィンドウの中の作業に集中できます。情報の編集や新しい項目の追加など、一度で済ませる小さな作業に使います。6つのパーツで組み立てます。

dialog.root：ダイアログのすべてのパーツを包みます。
dialog.trigger：押すとダイアログを開く要素を包みます。
dialog.content：ウィンドウに入れる中身です。
dialog.title：ウィンドウのタイトルです。開いたときにスクリーンリーダーが読み上げます。
dialog.description：ウィンドウの説明です。開いたときに一緒に読み上げられます。
dialog.close：押すとウィンドウを閉じる要素を包みます。

rx.dialog.root(
    rx.dialog.trigger(rx.button("Open Dialog")),
    rx.dialog.content(
        rx.dialog.title("Welcome to Reflex!"),
        rx.dialog.description(
            "This is a dialog component. You can render anything you want in here.",
        ),
        rx.dialog.close(
            rx.button("Close Dialog", size="3"),
        ),
    ),
)

プロパティを変えてみる

ウィンドウの大きさは、dialog.contentのsize（内側の余白）とmax_width（最大幅）で決めます。値を変えたら、ウィンドウを開いてみましょう。

プロパティを変えてみる

title

description

size

max_width

rx.dialog.root(
    rx.dialog.trigger(rx.button("Open dialog")),
    rx.dialog.content(
        rx.dialog.title("Invite teammates"),
        rx.dialog.description("They will get an email with a link."),
        rx.flex(
            rx.dialog.close(rx.button("Close", variant="soft", color_scheme="gray")),
            justify="end",
            margin_top="16px",
        ),
        size="3",
        max_width="450px",
    ),
)

sizeは余白と角の丸みをまとめて変えます。幅はmax_widthなどのスタイルプロパティで決めます。

パーツ	プロパティ	値	用途
`root`	`open`	`True` / `False`	開閉をStateで決める（制御）。`on_open_change`とセットで
`root`	`default_open`	`True` / `False`	最初の描画で開いておく（非制御）
`root`	`on_open_change`	イベント	開閉したとき。新しい開閉値（bool）を渡す
`content`	`size`	`"1"` ~ `"4"`	余白と角の丸みの大きさ
`content`	`on_open_auto_focus` · `on_close_auto_focus`	イベント	開くとウィンドウ内へ、閉じるとトリガーへフォーカスが移るとき
`content`	`on_escape_key_down`	イベント	Escキーを押したとき
`content`	`on_pointer_down_outside` · `on_interact_outside`	イベント	ウィンドウの外を押したり操作したりしたとき

trigger、title、description、closeには共通のイベントしかありません。Escキーやウィンドウの外のクリックでも閉じます。

実際の使い方：入力欄のあるウィンドウ

ウィンドウの中に入力欄を置き、下にキャンセルと保存のボタンを並べたプロフィール編集ウィンドウです。どちらのボタンもdialog.closeで包んでいるので、押すとウィンドウが閉じます。値を実際に保存する方法は、下の「フォームを送信する」と注文書で扱います。

rx.dialog.root(
    rx.dialog.trigger(rx.button("Edit Profile", size="4")),
    rx.dialog.content(
        rx.dialog.title("Edit Profile"),
        rx.dialog.description(
            "Change your profile details and preferences.",
            size="2",
            margin_bottom="16px",
        ),
        rx.flex(
            rx.text("Name", as_="div", size="2", margin_bottom="4px", weight="bold"),
            rx.input(default_value="Freja Johnson", placeholder="Enter your name"),
            rx.text("Email", as_="div", size="2", margin_bottom="4px", weight="bold"),
            rx.input(default_value="freja@example.com", placeholder="Enter your email"),
            direction="column",
            spacing="3",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button("Cancel", color_scheme="gray", variant="soft"),
            ),
            rx.dialog.close(
                rx.button("Save"),
            ),
            spacing="3",
            margin_top="16px",
            justify="end",
        ),
    ),
)

rx.inset(side="x")で包むと、表のような内容をウィンドウの左右の端までぴったり広げられます。

rx.dialog.root(
    rx.dialog.trigger(rx.button("View users", size="4")),
    rx.dialog.content(
        rx.dialog.title("Users"),
        rx.dialog.description("The following users have access to this project."),
        rx.inset(
            rx.table.root(
                rx.table.header(
                    rx.table.row(
                        rx.table.column_header_cell("Full Name"),
                        rx.table.column_header_cell("Email"),
                        rx.table.column_header_cell("Group"),
                    ),
                ),
                rx.table.body(
                    rx.table.row(
                        rx.table.row_header_cell("Danilo Rosa"),
                        rx.table.cell("danilo@example.com"),
                        rx.table.cell("Developer"),
                    ),
                    rx.table.row(
                        rx.table.row_header_cell("Zahra Ambessa"),
                        rx.table.cell("zahra@example.com"),
                        rx.table.cell("Admin"),
                    ),
                ),
            ),
            side="x",
            margin_top="24px",
            margin_bottom="24px",
        ),
        rx.flex(
            rx.dialog.close(
                rx.button("Close", variant="soft", color_scheme="gray"),
            ),
            spacing="3",
            justify="end",
        ),
    ),
)

開閉したとき：on_open_change

dialog.rootのon_open_changeは、開くとTrue、閉じるとFalseを渡します。開いた回数を数えたり、ウィンドウが閉じたときに入力値を片付けたりするのに使います。

Opened or closed: 0 times

Dialog open: no

class DialogEventState(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: ", DialogEventState.num_opens, " times"),
    rx.text("Dialog open: ", rx.cond(DialogEventState.opened, "yes", "no")),
    rx.dialog.root(
        rx.dialog.trigger(rx.button("Open Dialog")),
        rx.dialog.content(
            rx.dialog.title("Welcome to Reflex!"),
            rx.dialog.description(
                "This is a dialog component. You can render anything you want in here.",
            ),
            rx.dialog.close(
                rx.button("Close Dialog", size="3"),
            ),
        ),
        on_open_change=DialogEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

Stateで開け閉めする

openにStateの値をつなぐと、dialog.triggerがなくてもコードからウィンドウを開けます。下では、2つのボタンがそれぞれ別の値を入れてからウィンドウを開きます。on_open_changeも一緒につないでおけば、Escキーや外側のクリックで閉じたときもStateが追いつきます。

ドロップダウンメニューの項目からダイアログを開く方法は、Dropdown Menuのページで扱います。

class DialogControlState(rx.State):
    open: bool = False
    seconds: int = 0

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

    @rx.event
    def start(self, seconds: int):
        self.seconds = seconds
        self.open = True

    @rx.event
    def confirm(self):
        self.open = False


rx.flex(
    rx.button("Break: 5 min", variant="soft", on_click=DialogControlState.start(5)),
    rx.button("Break: 15 min", variant="soft", on_click=DialogControlState.start(15)),
    rx.dialog.root(
        rx.dialog.content(
            rx.dialog.title("Take a break"),
            rx.dialog.description("Stand up and stretch for ", DialogControlState.seconds, " minutes."),
            rx.flex(rx.button("OK", on_click=DialogControlState.confirm), justify="end", margin_top="16px"),
            max_width="380px",
        ),
        open=DialogControlState.open,
        on_open_change=DialogControlState.set_open,
    ),
    spacing="3",
    wrap="wrap",
)

フォームを送信する

ウィンドウの中にrx.formを置くと、入力値をまとめて受け取れます。送信ボタンをdialog.closeで包めば、送信と同時にウィンドウが閉じます。ハンドラーはnameをキーにしたdictを受け取り、通知（toast）を表示します。

class DialogFormState(rx.State):
    current_user: dict[str, str] = {}

    @rx.event
    def add_user(self, form_data: dict):
        self.current_user = form_data
        # Here you would save the user to a database (see the Database course).
        return rx.toast.info(
            f"User {form_data.get('name', '')} has been added.", position="bottom-right"
        )


rx.dialog.root(
    rx.dialog.trigger(
        rx.button(rx.icon("plus", size=26), rx.text("Add User", size="4")),
    ),
    rx.dialog.content(
        rx.dialog.title("Add New User"),
        rx.dialog.description("Fill the form with the user's info"),
        rx.form(
            rx.flex(
                rx.input(placeholder="User Name", name="name"),
                rx.input(placeholder="user@reflex.dev", name="email"),
                rx.flex(
                    rx.dialog.close(
                        rx.button("Cancel", variant="soft", color_scheme="gray"),
                    ),
                    rx.dialog.close(
                        rx.button("Submit", type="submit"),
                    ),
                    spacing="3",
                    justify="end",
                ),
                direction="column",
                spacing="4",
            ),
            on_submit=DialogFormState.add_user,
            reset_on_submit=False,
        ),
        max_width="450px",
    ),
)

公式ドキュメントの例では、同じ場所でデータベースに保存しています。その部分だけを取り出すと次のとおりです（このページでは実行しません）。

from sqlmodel import select


class User(rx.Model, table=True):
    name: str
    email: str


@rx.event
def add_user_to_db(self, form_data: dict):
    with rx.session() as session:
        if session.exec(select(User).where(User.email == form_data["email"])).first():
            return rx.window_alert("User with this email already exists")
        session.add(User(**form_data))
        session.commit()
    return rx.toast.info(f"User {form_data['name']} has been added.")

注文書を仕上げる

今回はウィンドウをStateで制御します。保存ボタンはdialog.closeで包まず、送信ハンドラーが値を保存してからself.open = Falseでウィンドウを閉じます。そのため、保存が済んだあとにだけウィンドウが閉じます。入力欄にはdefault_valueで今の値を入れておきます。

Freja Johnson

freja@example.com

class DialogProfileState(rx.State):
    open: bool = False
    name: str = "Freja Johnson"
    email: str = "freja@example.com"

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

    @rx.event
    def save(self, form_data: dict):
        self.name = form_data.get("name", "").strip() or self.name
        self.email = form_data.get("email", "").strip() or self.email
        self.open = False
        return rx.toast.success("Profile saved")


rx.card(
    rx.flex(
        rx.avatar(fallback="FJ", radius="full"),
        rx.box(
            rx.text(DialogProfileState.name, weight="bold"),
            rx.text(DialogProfileState.email, size="2", color_scheme="gray"),
        ),
        rx.spacer(),
        rx.dialog.root(
            rx.dialog.trigger(rx.button(rx.icon("pencil"), "Edit profile", variant="soft", size="2")),
            rx.dialog.content(
                rx.dialog.title("Edit profile"),
                rx.dialog.description("Change your name and email.", size="2", margin_bottom="12px"),
                rx.form(
                    rx.flex(
                        rx.input(name="name", default_value=DialogProfileState.name, placeholder="Name"),
                        rx.input(name="email", default_value=DialogProfileState.email, placeholder="Email", type="email"),
                        rx.flex(
                            rx.dialog.close(rx.button("Cancel", variant="soft", color_scheme="gray", type="button")),
                            rx.button("Save", type="submit"),
                            spacing="3",
                            justify="end",
                        ),
                        direction="column",
                        spacing="3",
                    ),
                    on_submit=DialogProfileState.save,
                ),
                max_width="420px",
            ),
            open=DialogProfileState.open,
            on_open_change=DialogProfileState.set_open,
        ),
        spacing="3",
        align="center",
    ),
    max_width="460px",
)

工房ノート

root · trigger · content · title · description · close。titleは必ず入れる（スクリーンリーダーが読み上げる）。
大きさはcontentのsize（"1"~"4"）とmax_width、端まで広げる内容はrx.inset。
on_open_changeは新しい開閉値（bool）を渡す。openで制御すればtriggerなしでも開ける。
フォームはrx.form + on_submit。送信と同時に閉じるならcloseで包むか、ハンドラーでopenをFalseに。
確認/キャンセルのように必ず答えを受け取りたいウィンドウにはAlert Dialogを使う。

← 前へ

オーバーレイ · Hover Card

オーバーレイ · Alert Dialog

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

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