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は、ボタンを押すとその横に浮かび上がる小さなウィンドウです。ツールチップと違って押したときに開き、中に入力欄やボタンなど操作できるものを入れられます。4つのパーツで組み立てます。

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の4パーツで組む。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