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

オーバーレイ

Drawer

rx.drawer.rootrx.drawer.triggerrx.drawer.overlayrx.drawer.portalrx.drawer.contentrx.drawer.close

公式ドキュメント

工房の注文書

スマホのショッピング画面で「フィルター」ボタンを押すと下からパネルがせり上がり、並び順と在庫の条件を選べるようにしてください。

rx.drawerは、画面の端からすべり込んでくるパネルです。横から出るメニューや下からせり上がる選択パネルのように、大きな中身を一時的に引き出しておきたいときに使います。指やマウスで引っぱって閉じることもできます。ReflexはこのコンポーネントをVaulライブラリで作っています。

drawer.root：すべてのパーツを包みます。方向（direction）と開閉状態はここに指定します。
drawer.trigger：押すとドロワーを開く要素を包みます。
drawer.overlay：開いているあいだ背後の画面を覆う半透明の幕です。
drawer.portal：中身をページのいちばん外側に描き、ほかの要素に隠れないようにします。
drawer.content：すべり込んでくるパネルそのものです。
drawer.close：押すとドロワーを閉じる要素を包みます。

drawer.contentは、既定では画面全体を覆うように（position: fixed、四辺とも0）配置されます。そのため、パネルの大きさは反対側の辺を"auto"にして外し、幅や高さを直接指定して決めます。左から出るパネルならright="auto"とwidthを指定します。

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open Drawer")),
    rx.drawer.overlay(z_index="5"),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.close(rx.box(rx.button("Close"))),
                align_items="start",
                direction="column",
            ),
            top="auto",
            right="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color=rx.color("gray", 2),
        )
    ),
    direction="left",
)

プロパティを変えてみる

右から出るパネル（direction="right"、left="auto"）の幅と色を変えてみます。modalをオフにすると、ドロワーを開いたまま背後の画面を押したりスクロールしたりできます。

プロパティを変えてみる

title

width

color

modal

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open panel")),
    rx.drawer.overlay(),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.title("Settings"),
                rx.drawer.description("Drag it to the right or press Esc to close."),
                rx.drawer.close(rx.button("Close", size="1")),
                direction="column",
                align_items="start",
                spacing="3",
            ),
            left="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color=rx.color("gray", 3),
        ),
    ),
    direction="right",
    modal=True,
)

パネルの大きさと色はdrawer.contentのスタイルプロパティで決めます。modalはdrawer.rootに指定します。

プロパティ（root）	値	既定値	用途
`direction`	`"top"` `"bottom"` `"left"` `"right"`	`"bottom"`	入ってくる方向。引っぱって閉じる方向も決まる
`open` · `default_open`	`True` / `False`	-	開閉をStateで決める（制御）· 最初に開いておく
`modal`	`True` / `False`	`True`	`False`なら開いたまま外側を押したりスクロールしたりできる
`dismissible`	`True` / `False`	-	`False`なら引っぱり・外側のクリック・Escで閉じない（`open`と一緒に使う）
`handle_only`	`True` / `False`	-	`True`なら`drawer.handle`でしか引っぱれない
`snap_points`	0~1の数値か`"px"`のリスト	-	止まる高さの一覧（Pythonの値のみ、Stateの値は不可）
`fade_from_index`	整数	最後の地点	何番目の停止位置から背景を暗くするか
`close_threshold`	0~1	-	どれだけ引っぱったら閉じるか
`scroll_lock_timeout`	ミリ秒	`500`	パネル内をスクロールしたあと、引っぱりを止めておく時間
`should_scale_background`	`True` / `False`	-	背後の画面を少し縮める効果（`vaul-drawer-wrapper`が必要）
`prevent_scroll_restoration`	`True` / `False`	`True`	閉じたあとのスクロール位置の復元を止める
`on_open_change`	イベント	-	開閉したとき。新しい開閉値（bool）を渡す
`on_animation_end`	イベント	-	開閉のアニメーションが終わったとき。その時点の開閉値を渡す

drawer.contentにはon_open_auto_focus、on_close_auto_focus、on_escape_key_down、on_pointer_down_outside、on_interact_outsideのイベントがあります。ほかのパーツが受け取るのはas_childくらいです。

4つの方向

directionごとにパネルを貼り付ける辺が変わるので、反対側の辺を"auto"にして外します。上・下から出るパネルは、幅の代わりに高さを決めます。4つのドロワーの作り方は同じなので、小さな関数1つにまとめました。

def drawer_edge_demo(side: str, **position):
    return rx.drawer.root(
        rx.drawer.trigger(rx.button(side, variant="soft")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.title(f"From the {side}"),
                    rx.drawer.close(rx.button("Close", size="1")),
                    direction="column",
                    align_items="start",
                    spacing="3",
                ),
                padding="2em",
                background_color=rx.color("gray", 2),
                **position,
            ),
        ),
        direction=side,
    )


rx.flex(
    drawer_edge_demo("left", right="auto", width="16em"),
    drawer_edge_demo("right", left="auto", width="16em"),
    drawer_edge_demo("top", bottom="auto", height="30%"),
    drawer_edge_demo("bottom", top="auto", height="30%"),
    spacing="3",
    wrap="wrap",
)

タイトル、説明、ハンドル

公式ドキュメントのパーツ一覧にはありませんが、0.10にはdrawer.title、drawer.description、drawer.handleもあります。タイトルと説明はスクリーンリーダーが読み上げ、ハンドルはパネルの上部に引っぱれるバーを描きます。handle_only=Trueを指定するとハンドルでしか引っぱれなくなるので、パネル内のボタンを押そうとしてうっかり閉じてしまうことが減ります。

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open sheet")),
    rx.drawer.overlay(),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.handle(),
                rx.drawer.title("Share this page"),
                rx.drawer.description("Drag the handle down to close the sheet."),
                rx.flex(
                    rx.button(rx.icon("link"), "Copy link", variant="soft"),
                    rx.button(rx.icon("mail"), "Email", variant="soft"),
                    spacing="3",
                ),
                direction="column",
                spacing="3",
                width="100%",
            ),
            top="auto",
            height="auto",
            padding="1.5em",
            background_color=rx.color("gray", 2),
            border_radius="12px 12px 0 0",
        ),
    ),
    handle_only=True,
)

Stateで開け閉めする：サイドメニュー

openにStateの値をつなぐと、リンクを押したときにコードからドロワーを閉じられます。on_open_changeも一緒につなぎ、トリガーボタン、Closeボタン、Escキーで変わった開閉値もStateに戻るようにします。modal=Falseなのでドロワーを開いたままページをスクロールでき、リンクを押すとドロワーが閉じてその節へ移動します。

Section 1

Section 2

class DrawerSidebarState(rx.State):
    is_open: bool = False

    @rx.event
    def set_is_open(self, value: bool):
        self.is_open = value

    @rx.event
    def close_drawer(self):
        self.is_open = False


rx.vstack(
    rx.drawer.root(
        rx.drawer.trigger(rx.button("Open Drawer")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.close(rx.button("Close")),
                    rx.link("Section 1", href="#drawer-section-1", on_click=DrawerSidebarState.close_drawer),
                    rx.link("Section 2", href="#drawer-section-2", on_click=DrawerSidebarState.close_drawer),
                    align_items="start",
                    direction="column",
                    spacing="3",
                ),
                right="auto",
                height="100%",
                width="16em",
                padding="2em",
                background_color=rx.color("grass", 4),
            ),
        ),
        open=DrawerSidebarState.is_open,
        on_open_change=DrawerSidebarState.set_is_open,
        direction="left",
        modal=False,
    ),
    rx.section(rx.heading("Section 1", size="5"), id="drawer-section-1", height="160px", padding="1em 0"),
    rx.section(rx.heading("Section 2", size="5"), id="drawer-section-2", height="160px", padding="1em 0"),
)

注文書を仕上げる

下からせり上がるフィルターパネルです。スイッチとラジオで選んだ値はすぐStateに入り、「Show results」を押すとハンドラーがself.open = Falseでパネルを下ろします。パネルを引き下ろして閉じても、同じ値が残ります。

Sort: Newest

class DrawerFilterState(rx.State):
    open: bool = False
    in_stock: bool = False
    sort: str = "Newest"

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

    @rx.event
    def set_in_stock(self, value: bool):
        self.in_stock = value

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

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


rx.flex(
    rx.text("Sort: ", DrawerFilterState.sort, rx.cond(DrawerFilterState.in_stock, " · in stock only", ""), size="2"),
    rx.drawer.root(
        rx.drawer.trigger(rx.button(rx.icon("sliders-horizontal"), "Filters", variant="outline")),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.flex(
                    rx.drawer.handle(),
                    rx.drawer.title("Filters"),
                    rx.flex(rx.switch(checked=DrawerFilterState.in_stock, on_change=DrawerFilterState.set_in_stock),
                            rx.text("In stock only", size="2"), spacing="2", align="center"),
                    rx.radio(["Newest", "Price: low", "Price: high"], value=DrawerFilterState.sort,
                             on_change=DrawerFilterState.set_sort, direction="row"),
                    rx.button("Show results", on_click=DrawerFilterState.apply, width="100%"),
                    direction="column",
                    spacing="4",
                    width="100%",
                    max_width="480px",
                    margin="0 auto",
                ),
                top="auto",
                height="auto",
                padding="1.5em",
                background_color=rx.color("gray", 2),
                border_radius="12px 12px 0 0",
            ),
        ),
        open=DrawerFilterState.open,
        on_open_change=DrawerFilterState.set_open,
        direction="bottom",
    ),
    spacing="3",
    align="center",
    wrap="wrap",
)

工房ノート

root(direction) > trigger · overlay · portal > content > close。方向の既定値はbottom。
contentは画面全体を覆うように置かれるので、反対側の辺を"auto"にして外し、widthかheightを決める。
open + on_open_changeで制御すれば、リンクやボタンのハンドラーからドロワーを閉じられる。
modal=Falseは開いたまま背後の画面を使えるようにし、handle_only=Trueはハンドルでしか引っぱれないようにする。
snap_pointsはコンパイル時に決まる値なので、Stateの値は入れられない。

← 前へ

オーバーレイ · Alert Dialog

オーバーレイ · Dropdown Menu

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

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

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex