ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Overlays

Toast

rx.toastrx.toast.provider

Offizielle Doku

Werkstattauftrag

Klickt man im Einstellungsbildschirm auf „Speichern“, soll in einer Bildschirmecke eine Benachrichtigung „Wird gespeichert…“ erscheinen, die nach getaner Arbeit zu „Gespeichert“ wechselt.

rx.toast ist eine Benachrichtigung, die kurz in einer Bildschirmecke auftaucht und von selbst wieder verschwindet. Anders als ein Dialog unterbricht sie nicht, was man gerade tut; man nutzt sie für Momente, in denen nur ein Ergebnis mitzuteilen ist, etwa „Gespeichert“. rx.toast(...) ist keine Komponente, sondern ein Event. Du setzt es direkt in das on_click eines Buttons oder gibst es aus einem Event-Handler per yield oder return zurück.

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

Props ausprobieren

Aussehen und Verhalten der Benachrichtigung übergibst du als Keyword-Argumente an rx.toast. Ändere einen Wert und klicke dann auf den Button. duration ist die Zeit in Millisekunden, bis sie sich von selbst schließt.

Props ausprobieren

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 ist die Ecke, in der sich die Benachrichtigungen stapeln, close_button der Schließen-Button (×), und invert macht sie auf hellem Hintergrund dunkel.

Option	Werte	Verwendung
`description`	String	Kleine Beschreibung unter dem Titel
`title`	String	Titel (neu in 0.10, kann statt des ersten Arguments stehen)
`position`	`"top-left"` `"top-center"` `"top-right"` `"bottom-left"` `"bottom-center"` `"bottom-right"`	Ecke, in der sie erscheint
`duration`	Millisekunden	Zeit, bis sie sich von selbst schließt (sonner-Standard 4000)
`close_button`	`True` / `False`	Schließen-Button (×) anzeigen
`invert`	`True` / `False`	Dunkle Benachrichtigung auf hellem Hintergrund und umgekehrt
`important`	`True` / `False`	Screenreader lesen sie dringlicher vor
`dismissible`	`True` / `False`	Bei `False` lässt sie sich nicht wegwischen
`action` · `cancel`	`{"label": Text, "on_click": Event}`	Haupt- und Neben-Button; ein Klick schließt die Benachrichtigung
`id`	String	Name der Benachrichtigung. Mit derselben id erneut gesendet, wird sie ersetzt
`unstyled` · `style` · `class_name`	-	Standardaussehen abschalten, selbst gestalten
`on_dismiss`	Event	Wenn sie per Schließen-Button geschlossen oder weggewischt wird
`on_auto_close`	Event	Wenn sie sich nach Ablauf von `duration` von selbst schließt

Für die einzelnen Arten gibt es rx.toast.success, rx.toast.error, rx.toast.warning, rx.toast.info und rx.toast.loading, zum Schließen das Event rx.toast.dismiss(id).

Aus dem State senden

Ein Event-Handler kann nach getaner Arbeit mit yield rx.toast(...) eine Benachrichtigung senden. Der Handler unten tut so, als hole er Daten, wartet eine Sekunde und zeigt dann die Benachrichtigung. Mit await asyncio.sleep in einem async-Handler kann der Server während des Wartens anderes erledigen.

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)

Benachrichtigungen mit Buttons

Übergibst du action und cancel ein dict mit label und on_click, bekommt die Benachrichtigung Buttons. Ein Klick führt das jeweilige Event aus und schließt die Benachrichtigung. Wird sie per Schließen-Button (×) geschlossen oder zur Seite gewischt, wird on_dismiss aufgerufen; schließt sie sich nach Ablauf der Zeit von selbst, on_auto_close. Im Protokoll unten siehst du, welches Event ausgelöst wurde.

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",
)

Vordefinierte Arten

Für Erfolg, Fehler, Warnung und Info gibt es Funktionen mit festem Icon und fester Farbe. Reflex' Standard-Toaster nutzt rich_colors=True, daher hat jede Art auch eine eigene Hintergrundfarbe.

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 kennt außerdem rx.toast.loading und rx.toast.dismiss. Eine Lade-Benachrichtigung schließt sich nicht von selbst; du ersetzt sie, indem du eine andere mit derselben id sendest, oder schließt sie mit rx.toast.dismiss. Ohne id aufgerufen, also rx.toast.dismiss(), schließt es alle Benachrichtigungen.

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",
)

Selbst gestalten

Passt das Aussehen der vordefinierten Arten nicht, übergibst du CSS an style und gestaltest selbst. Auch position lässt sich pro Benachrichtigung festlegen.

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",
        },
    ),
)

Der Toaster: rx.toast.provider

Damit Benachrichtigungen erscheinen, muss irgendwo in der App ein Toaster (rx.toast.provider) stehen. rx.App in Reflex 0.10 setzt ihn standardmäßig in die Einstellung toaster, sodass man ihn meist nicht selbst einbauen muss (die offizielle Doku beschreibt, dass er in overlay_component steckt). Um die Standardwerte für die ganze App zu ändern, übergibst du beim Erstellen von rx.App einen eigenen Toaster. Da das die ganze Website betrifft, zeigt diese Seite es nur als Code.

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

Prop des Toasters	Verwendung
`position`	Standardposition (Reflex-Standard `"bottom-right"`)
`rich_colors`	Hintergrundfarbe je nach Art (Reflex-Standard `True`)
`expand`	Gestapelte Benachrichtigungen aufgefächert zeigen (Reflex-Standard `True`)
`close_button`	Schließen-Button an allen Benachrichtigungen (Standard `False`)
`visible_toasts` · `gap` · `offset`	Anzahl gleichzeitig sichtbarer, Abstand untereinander, Abstand zum Bildschirmrand
`theme` · `invert` · `dir`	Helligkeit (folgt standardmäßig dem Farbmodus der Website), Invertierung, Schreibrichtung
`hotkey`	Tastenkürzel, das den Fokus auf den Toaster setzt
`toast_options`	Standardoptionen aller Benachrichtigungen (`rx.toast.options(...)`)
`loading_icon` · `pause_when_page_is_hidden`	Lade-Icon, Zeit anhalten, wenn der Tab verdeckt ist

Auftrag erledigt

Der Speichern-Handler sendet zuerst eine Lade-Benachrichtigung und nach getaner Arbeit eine Erfolgsmeldung mit derselben id. Deshalb stapelt sich keine neue Benachrichtigung, sondern „Saving settings…“ wechselt zu „Settings saved“.

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",
)

Werkstattnotizen

rx.toast("Text", ...) ist ein Event. In on_click setzen oder im Handler per yield bzw. return zurückgeben.
Aussehen: description · position · duration · close_button · invert, Buttons: dicts für action · cancel.
Arten: success · error · warning · info · loading, Schließen: rx.toast.dismiss(id).
Mit derselben id erneut gesendet, wird die Benachrichtigung ersetzt (Laden → Fertig).
Der Toaster steckt standardmäßig in rx.App. App-weite Standardwerte über rx.App(toaster=rx.toast.provider(...)).

← Zurück

Overlays · Context Menu

Weiter →

Dynamisches Rendern · Cond

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex