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

オーバーレイ

Toast

rx.toastrx.toast.provider

公式ドキュメント

工房の注文書

設定画面で「保存」を押すと画面の隅に「保存中…」が出て、終わったら「保存しました」に変わる通知を見せてください。

rx.toastは、画面の隅に一瞬現れて自然に消える通知です。ダイアログと違って作業の邪魔をしないので、「保存しました」のように結果を伝えるだけでよい場面に使います。rx.toast(...)はコンポーネントではなくイベントです。ボタンのon_clickに直接入れるか、イベントハンドラーからyield・returnで返します。

rx.button("Show Toast", on_click=rx.toast("Hello, World!"))

プロパティを変えてみる

通知の見た目と動きは、rx.toastにキーワード引数で渡します。値を変えたら、ボタンを押してみてください。durationは自然に閉じるまでの時間（ミリ秒）です。

プロパティを変えてみる

message

description

position

duration

4000

close_button

invert

dismissible

rx.button(
    "Show toast",
    on_click=rx.toast(
        "Event created",
        description="Sunday, December 3 at 9:00 AM",
        position="bottom-right",
        duration=4000,
        close_button=False,
        invert=False,
        dismissible=True,
    ),
)

positionは通知が積み重なる隅、close_buttonは閉じる（×）ボタン、invertは明るい画面で暗い通知を作ります。

オプション	値	用途
`description`	文字列	タイトルの下の小さな説明
`title`	文字列	タイトル（0.10で追加。最初の引数の代わりに使える）
`position`	`"top-left"` `"top-center"` `"top-right"` `"bottom-left"` `"bottom-center"` `"bottom-right"`	通知が現れる隅
`duration`	ミリ秒	自然に閉じるまでの時間（sonnerの既定は4000）
`close_button`	`True` / `False`	閉じる（×）ボタンを表示
`invert`	`True` / `False`	明るい画面で暗い通知、またはその逆
`important`	`True` / `False`	スクリーンリーダーに優先して読ませる
`dismissible`	`True` / `False`	`False`ならスワイプで消せない
`action` · `cancel`	`{"label": 文, "on_click": イベント}`	メインボタン · サブボタン。押すと通知が閉じる
`id`	文字列	通知の名前。同じidでもう一度送るとその通知が置き換わる
`unstyled` · `style` · `class_name`	-	既定の見た目を外す、自分で装飾する
`on_dismiss`	イベント	閉じるボタンを押したかスワイプで消したとき
`on_auto_close`	イベント	`duration`が過ぎて自然に閉じたとき

種類別の関数としてrx.toast.success、rx.toast.error、rx.toast.warning、rx.toast.info、rx.toast.loadingがあり、閉じるイベントとしてrx.toast.dismiss(id)があります。

Stateから送る

イベントハンドラーは、処理を終えてからyield rx.toast(...)で通知を送れます。下のハンドラーは、データを取ってくるふりをして1秒待ってから通知を出します。asyncハンドラーでawait asyncio.sleepを使えば、待っているあいだもサーバーは別の仕事ができます。

import asyncio


class ToastFetchState(rx.State):
    @rx.event
    async def fetch_data(self):
        # Simulate fetching data for a 1-second delay
        await asyncio.sleep(1)
        # Shows a toast when the data is fetched
        yield rx.toast("Data fetched!")


rx.button("Get Data", on_click=ToastFetchState.fetch_data)

ボタン付きの通知

actionとcancelにlabelとon_clickを持つdictを渡すと、通知の中にボタンができます。ボタンを押すとそのイベントが実行され、通知が閉じます。閉じる（×）を押すか横にスワイプして消すとon_dismissが、時間切れで自然に閉じるとon_auto_closeが呼ばれます。下のログで、どのイベントが呼ばれたか確かめてみてください。

class ToastActionState(rx.State):
    log: list[str] = []

    @rx.event
    def add_log(self, line: str):
        self.log = (self.log + [line])[-4:]


rx.flex(
    rx.button(
        "Delete item",
        on_click=rx.toast(
            "Item deleted",
            action={"label": "Undo", "on_click": ToastActionState.add_log("Undo clicked")},
            cancel={"label": "Dismiss", "on_click": ToastActionState.add_log("Dismiss clicked")},
            close_button=True,
            on_dismiss=ToastActionState.add_log("Closed or swiped away"),
            on_auto_close=ToastActionState.add_log("Closed automatically"),
        ),
    ),
    rx.vstack(rx.foreach(ToastActionState.log, lambda line: rx.code(line)), spacing="1"),
    direction="column",
    spacing="3",
    align="start",
)

用意された種類

成功、エラー、警告、情報のそれぞれに、アイコンと色が決まった関数があります。Reflexの既定のトースターはrich_colors=Trueなので、種類ごとに背景色も変わります。

rx.hstack(
    rx.button("Success", on_click=rx.toast.success("Success!"), color_scheme="green"),
    rx.button("Error", on_click=rx.toast.error("Error!"), color_scheme="red"),
    rx.button("Warning", on_click=rx.toast.warning("Warning!"), color_scheme="orange"),
    rx.button("Info", on_click=rx.toast.info("Info!"), color_scheme="blue"),
    wrap="wrap",
)

0.10にはrx.toast.loadingとrx.toast.dismissもあります。読み込み中の通知は自然には閉じないので、同じidで別の通知を送って置き換えるか、rx.toast.dismissで閉じます。rx.toast.dismiss()のようにidなしで呼ぶと、すべての通知が閉じます。

rx.flex(
    rx.button("Start", on_click=rx.toast.loading("Uploading…", id="upload-demo"), variant="soft"),
    rx.button("Finish", on_click=rx.toast.success("Upload complete", id="upload-demo"), variant="soft", color_scheme="green"),
    rx.button("Dismiss all", on_click=rx.toast.dismiss(), variant="soft", color_scheme="gray"),
    spacing="3",
    wrap="wrap",
)

自分で装飾する

種類別の見た目が合わなければ、styleにCSSを渡して自分で装飾します。positionも通知ごとに個別に決められます。

rx.button(
    "Custom",
    on_click=rx.toast(
        "Custom Toast!",
        position="top-right",
        style={
            "background-color": "green",
            "color": "white",
            "border": "1px solid green",
            "border-radius": "0.5em",
        },
    ),
)

トースター：rx.toast.provider

通知を出すには、アプリのどこかに通知の置き場であるトースター（rx.toast.provider）が必要です。Reflex 0.10のrx.Appはtoaster設定にトースターを最初から入れているので、ふつうは別に置く必要はありません（公式ドキュメントではoverlay_componentに含まれていると説明されています）。アプリ全体の通知の既定値を変えたいときは、rx.Appを作るときにトースターを渡します。サイト全体に影響するため、このページではコードだけを示します。

app = rx.App(
    toaster=rx.toast.provider(
        position="top-center",
        close_button=True,
        visible_toasts=3,
        toast_options=rx.toast.options(duration=6000),
    ),
)

トースターのプロパティ	用途
`position`	既定の位置（Reflexの既定は`"bottom-right"`）
`rich_colors`	種類別の背景色（Reflexの既定は`True`）
`expand`	積み重なった通知を広げて見せる（Reflexの既定は`True`）
`close_button`	すべての通知に閉じるボタン（既定は`False`）
`visible_toasts` · `gap` · `offset`	一度に表示する数、通知どうしの間隔、画面の端からの距離
`theme` · `invert` · `dir`	明るさ（既定ではサイトのカラーモードに従う）、反転、文字の方向
`hotkey`	トースターへフォーカスを移すショートカットキー
`toast_options`	すべての通知の既定オプション（`rx.toast.options(...)`）
`loading_icon` · `pause_when_page_is_hidden`	読み込み中アイコン、タブが隠れたら時間を止める

注文書を仕上げる

保存ハンドラーはまず読み込み中の通知を送り、処理を終えてから同じidで成功の通知を送ります。そのため通知が新しく積み重ならず、「保存中…」が「保存しました」に置き換わります。

Email notifications

Saved versions: 0

import asyncio


class ToastSaveState(rx.State):
    saved_at: int = 0

    @rx.event
    async def save(self):
        yield rx.toast.loading("Saving settings…", id="toast-save")
        await asyncio.sleep(1)
        self.saved_at += 1
        yield rx.toast.success(
            "Settings saved",
            id="toast-save",
            description=f"Version {self.saved_at}",
            duration=3000,
        )


rx.card(
    rx.flex(
        rx.box(
            rx.text("Email notifications", weight="bold"),
            rx.text("Saved versions: ", ToastSaveState.saved_at, size="2", color_scheme="gray"),
        ),
        rx.spacer(),
        rx.button("Save", on_click=ToastSaveState.save),
        align="center",
        spacing="3",
    ),
    max_width="420px",
)

工房ノート

rx.toast("文", ...)はイベント。on_clickに入れるか、ハンドラーでyield・returnする。
見た目：description · position · duration · close_button · invert、ボタン：action · cancelのdict。
種類：success · error · warning · info · loading、閉じる：rx.toast.dismiss(id)。
同じidでもう一度送ると、その通知が置き換わる（読み込み中 → 完了）。
トースターはrx.Appに最初からある。アプリ全体の既定値はrx.App(toaster=rx.toast.provider(...))。

← 前へ

オーバーレイ · Context Menu

動的レンダリング · Cond

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

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