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

Alert Dialog

rx.alert_dialog.rootrx.alert_dialog.triggerrx.alert_dialog.contentrx.alert_dialog.titlerx.alert_dialog.descriptionrx.alert_dialog.actionrx.alert_dialog.cancel

Offizielle Doku

Werkstattauftrag

Klickt man in der Projektliste auf den Papierkorb, soll das Projekt nicht sofort gelöscht werden. Zeig vorher ein Fenster, das noch einmal nachfragt, ob es wirklich weg soll.

rx.alert_dialog ist ein Bestätigungsfenster, das den Ablauf anhält und eine Antwort verlangt. Anders als ein normaler Dialog schließt es sich nicht per Klick außerhalb; der Nutzer muss zwischen „Abbrechen“ und „Ausführen“ wählen (die Esc-Taste zählt als Abbrechen). Man stellt es vor Schritte, die sich schwer rückgängig machen lassen, etwa Löschen oder Rechte entziehen.

alert_dialog.root: umschließt alle Teile.
alert_dialog.trigger: umschließt das Element, das das Fenster per Klick öffnet.
alert_dialog.content: der Inhalt des Fensters.
alert_dialog.title: der Titel des Fensters. Screenreader lesen ihn beim Öffnen vor.
alert_dialog.description: eine ergänzende Beschreibung (optional). Sie wird beim Öffnen mit vorgelesen.
alert_dialog.action: umschließt den Ausführen-Button. Ein Klick schließt das Fenster.
alert_dialog.cancel: umschließt den Abbrechen-Button. Ein Klick schließt das Fenster. Er sollte sich optisch klar vom Ausführen-Button unterscheiden.

rx.alert_dialog.root(
    rx.alert_dialog.trigger(
        rx.button("Revoke access"),
    ),
    rx.alert_dialog.content(
        rx.alert_dialog.title("Revoke access"),
        rx.alert_dialog.description(
            "Are you sure? This application will no longer be accessible and any existing sessions will be expired.",
        ),
        rx.flex(
            rx.alert_dialog.cancel(
                rx.button("Cancel"),
            ),
            rx.alert_dialog.action(
                rx.button("Revoke access"),
            ),
            spacing="3",
        ),
    ),
)

Props ausprobieren

Den Innenabstand des Fensters bestimmt size an content, die Anordnung der Buttons justify am umgebenden rx.flex. Der Ausführen-Button bekommt eine Farbe, die zur Tragweite der Aktion passt.

Props ausprobieren

title

action

color

size

justify

rx.alert_dialog.root(
    rx.alert_dialog.trigger(rx.button("Delete", color_scheme="red")),
    rx.alert_dialog.content(
        rx.alert_dialog.title("Delete this file?"),
        rx.alert_dialog.description("This action cannot be undone.", size="2"),
        rx.flex(
            rx.alert_dialog.cancel(rx.button("Cancel", variant="soft", color_scheme="gray")),
            rx.alert_dialog.action(rx.button("Delete", color_scheme="red")),
            spacing="3",
            margin_top="16px",
            justify="end",
        ),
        size="3",
        max_width="450px",
    ),
)

Bei gefährlichen Aktionen ist der Ausführen-Button red und Abbrechen grau mit soft. Die Buttons stehen meist ganz rechts (justify="end").

Teil	Prop	Werte	Verwendung
`root`	`open`	`True` / `False`	Offen-Zustand über den State steuern (kontrolliert)
`root`	`default_open`	`True` / `False`	Beim ersten Rendern offen (unkontrolliert)
`root`	`on_open_change`	Event	Beim Öffnen oder Schließen; übergibt den neuen Offen-Wert (bool)
`content`	`size`	`"1"` ~ `"4"`	Größe von Innenabstand und Ecken
`content`	`force_mount`	`True` / `False`	Auch geschlossen im DOM lassen (für Animationen)
`content`	`on_open_auto_focus` · `on_close_auto_focus`	Event	Wenn beim Öffnen das Fenster bzw. beim Schließen der Trigger den Fokus bekommt
`content`	`on_escape_key_down`	Event	Beim Drücken der Esc-Taste

trigger, title, description, action und cancel haben nur die allgemeinen Events. Die Events für Klicks außerhalb, die der content eines Dialogs hat, fehlen hier, denn ein Klick außerhalb schließt das Fenster ohnehin nicht.

Farbe und Ausrichtung nach rechts

Ausführen-Button und Trigger sind rot, Abbrechen ist grau mit soft zurückgenommen, und beide Buttons sitzen dank justify="end" rechts. Die Fensterbreite ist mit style={"max_width": 450} verringert.

rx.alert_dialog.root(
    rx.alert_dialog.trigger(
        rx.button("Revoke access", color_scheme="red"),
    ),
    rx.alert_dialog.content(
        rx.alert_dialog.title("Revoke access"),
        rx.alert_dialog.description(
            "Are you sure? This application will no longer be accessible and any existing sessions will be expired.",
            size="2",
        ),
        rx.flex(
            rx.alert_dialog.cancel(
                rx.button("Cancel", variant="soft", color_scheme="gray"),
            ),
            rx.alert_dialog.action(
                rx.button("Revoke access", color_scheme="red", variant="solid"),
            ),
            spacing="3",
            margin_top="16px",
            justify="end",
        ),
        style={"max_width": 450},
    ),
)

Reicht eine Tabelle per rx.inset bis an den linken und rechten Rand des Fensters, sieht man auf einen Blick, was gelöscht wird.

rx.alert_dialog.root(
    rx.alert_dialog.trigger(
        rx.button("Delete Users", color_scheme="red"),
    ),
    rx.alert_dialog.content(
        rx.alert_dialog.title("Delete Users"),
        rx.alert_dialog.description(
            "Are you sure you want to delete these users? This action is permanent and cannot be undone.",
            size="2",
        ),
        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.alert_dialog.cancel(
                rx.button("Cancel", variant="soft", color_scheme="gray"),
            ),
            rx.alert_dialog.action(
                rx.button("Delete users", color_scheme="red"),
            ),
            spacing="3",
            justify="end",
        ),
        style={"max_width": 500},
    ),
)

Beim Öffnen und Schließen: on_open_change

on_open_change an alert_dialog.root übergibt beim Öffnen True und beim Schließen False.

Opened or closed: 0 times

Alert dialog open: no

class AlertDialogEventState(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: ", AlertDialogEventState.num_opens, " times"),
    rx.text("Alert dialog open: ", rx.cond(AlertDialogEventState.opened, "yes", "no")),
    rx.alert_dialog.root(
        rx.alert_dialog.trigger(
            rx.button("Revoke access", color_scheme="red"),
        ),
        rx.alert_dialog.content(
            rx.alert_dialog.title("Revoke access"),
            rx.alert_dialog.description(
                "Are you sure? This application will no longer be accessible and any existing sessions will be expired.",
                size="2",
            ),
            rx.flex(
                rx.alert_dialog.cancel(
                    rx.button("Cancel", variant="soft", color_scheme="gray"),
                ),
                rx.alert_dialog.action(
                    rx.button("Revoke access", color_scheme="red", variant="solid"),
                ),
                spacing="3",
                margin_top="16px",
                justify="end",
            ),
            style={"max_width": 450},
        ),
        on_open_change=AlertDialogEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

Öffnen und Schließen über den State

Verbindest du open mit einem State-Wert, lässt sich das Fenster ohne alert_dialog.trigger über einen Button außerhalb öffnen. Die Buttons Abbrechen und Ausführen im Fenster schließen es, indem sie den Wert über denselben Handler umkehren. Damit der State auch beim Schließen per Esc-Taste mitzieht, bindest du on_open_change mit an.

Das Beispiel in der offiziellen Doku kehrt den Wert mit self.opened = ~self.opened um, doch in Python macht ~ aus einem bool eine Ganzzahl (-1, -2). Hier verwenden wir not self.opened.

class AlertDialogControlState(rx.State):
    opened: bool = False

    @rx.event
    def dialog_open(self):
        self.opened = not self.opened

    @rx.event
    def set_opened(self, value: bool):
        self.opened = value


rx.box(
    rx.alert_dialog.root(
        rx.alert_dialog.content(
            rx.alert_dialog.title("Revoke access"),
            rx.alert_dialog.description(
                "Are you sure? This application will no longer be accessible and any existing sessions will be expired.",
            ),
            rx.flex(
                rx.alert_dialog.cancel(
                    rx.button("Cancel", on_click=AlertDialogControlState.dialog_open),
                ),
                rx.alert_dialog.action(
                    rx.button("Revoke access", on_click=AlertDialogControlState.dialog_open),
                ),
                spacing="3",
            ),
        ),
        open=AlertDialogControlState.opened,
        on_open_change=AlertDialogControlState.set_opened,
    ),
    rx.button("Button to Open the Dialog", on_click=AlertDialogControlState.dialog_open),
)

Formular absenden

Wie beim Dialog kannst du ein rx.form hineinsetzen. Umschließt du den Absenden-Button mit alert_dialog.action, schließt sich das Fenster gleichzeitig mit dem Absenden. Das eigentliche Speichern in der Datenbank funktioniert wie im Code auf der Seite Dialog.

class AlertDialogFormState(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.alert_dialog.root(
    rx.alert_dialog.trigger(
        rx.button(rx.icon("plus", size=26), rx.text("Add User", size="4")),
    ),
    rx.alert_dialog.content(
        rx.alert_dialog.title("Add New User"),
        rx.alert_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.alert_dialog.cancel(
                        rx.button("Cancel", variant="soft", color_scheme="gray"),
                    ),
                    rx.alert_dialog.action(
                        rx.button("Submit", type="submit"),
                    ),
                    spacing="3",
                    justify="end",
                ),
                direction="column",
                spacing="4",
            ),
            on_submit=AlertDialogFormState.add_user,
            reset_on_submit=False,
        ),
        max_width="450px",
    ),
)

Auftrag erledigt

Jeder Eintrag der Liste bekommt einen Papierkorb-Button und ein Bestätigungsfenster. Das on_click des Ausführen-Buttons erhält den Namen des zu löschenden Projekts; der Handler entfernt den Eintrag aus der Liste und zeigt eine Benachrichtigung. Klickt man auf Abbrechen oder drückt Esc, passiert nichts.

Website

Mobile app

Newsletter

class AlertDialogProjectState(rx.State):
    projects: list[str] = ["Website", "Mobile app", "Newsletter"]

    @rx.event
    def delete_project(self, name: str):
        self.projects = [p for p in self.projects if p != name]
        return rx.toast.success(f"Deleted {name}")

    @rx.event
    def restore(self):
        self.projects = ["Website", "Mobile app", "Newsletter"]


rx.vstack(
    rx.foreach(
        AlertDialogProjectState.projects,
        lambda name: rx.flex(
            rx.text(name),
            rx.spacer(),
            rx.alert_dialog.root(
                rx.alert_dialog.trigger(
                    rx.icon_button(rx.icon("trash-2"), color_scheme="red", variant="ghost", aria_label="Delete"),
                ),
                rx.alert_dialog.content(
                    rx.alert_dialog.title("Delete project?"),
                    rx.alert_dialog.description(
                        "The project ", rx.text.strong(name), " and all its files will be deleted.",
                        size="2",
                    ),
                    rx.flex(
                        rx.alert_dialog.cancel(rx.button("Cancel", variant="soft", color_scheme="gray")),
                        rx.alert_dialog.action(
                            rx.button("Delete", color_scheme="red", on_click=AlertDialogProjectState.delete_project(name)),
                        ),
                        spacing="3",
                        margin_top="16px",
                        justify="end",
                    ),
                    max_width="420px",
                ),
            ),
            width="100%",
            align="center",
            padding="6px 10px",
            border=f"1px solid {rx.color('gray', 5)}",
            border_radius="6px",
        ),
    ),
    rx.button("Restore all", size="1", variant="soft", on_click=AlertDialogProjectState.restore),
    width="100%",
    max_width="360px",
)

Werkstattnotizen

root · trigger · content · title · description · action · cancel. Ein Klick außerhalb schließt es nicht.
action und cancel schließen beide das Fenster. Die eigentliche Aktion hängt am on_click des Buttons in action.
Ausführen-Button in einer Farbe passend zur Tragweite (Löschen: red), Abbrechen grau mit soft absetzen.
Wer mit open steuert, bindet auch on_open_change an, damit ein Schließen per Esc im State ankommt.
Lässt sich die Aktion rückgängig machen, statt eines Bestätigungsfensters auch eine Benachrichtigung (Toast) mit „Rückgängig“ nach der Aktion erwägen.

← Zurück

Overlays · Dialog

Weiter →

Overlays · Drawer

Ü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