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

Popover

rx.popover.rootrx.popover.triggerrx.popover.contentrx.popover.close

Offizielle Doku

Werkstattauftrag

Unter einem Beitrag steht ein Button „Kommentieren“. Wer ihn anklickt, soll in einem kleinen Fenster direkt an Ort und Stelle einen kurzen Kommentar schreiben können, ohne die Seite zu verlassen.

rx.popover ist ein kleines Fenster, das neben einem Button aufspringt, wenn man ihn anklickt. Anders als ein Tooltip öffnet es sich per Klick und darf Bedienelemente wie Eingabefelder oder Buttons enthalten. Es besteht aus vier Teilen.

popover.root: umschließt alle Teile des Popovers.
popover.trigger: umschließt den Button, der das Popover per Klick öffnet und schließt.
popover.content: der Inhalt, der im geöffneten Zustand erscheint.
popover.close: umschließt einen Button, der das Popover per Klick schließt.

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

Props ausprobieren

Position und Größe gehören an popover.content, ob es modal ist, an popover.root. Ändere einen Wert und klicke dann auf Open.

Props ausprobieren

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 ändert Innenabstand und Ecken zugleich. Mit modal lassen sich Elemente außerhalb weder anklicken noch scrollen, solange das Popover offen ist.

Teil	Prop	Werte	Verwendung
`root`	`open`	`True` / `False`	Offen-Zustand über den State steuern (kontrolliert), zusammen mit `on_open_change`
`root`	`default_open`	`True` / `False`	Beim ersten Rendern offen (unkontrolliert)
`root`	`modal`	`True` / `False`	Solange offen, Bedienung außerhalb sperren und den Rest vor Screenreadern verbergen
`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`	`side` · `align`	Positionsname	Seite und Ausrichtung (Standard `"bottom"`, `"center"`)
`content`	`side_offset` · `align_offset`	Zahl (px)	Abstand zum Button bzw. zusätzliche Verschiebung von der Ausrichtung
`content`	`avoid_collisions` · `collision_padding`	bool · Zahl	Am Bildschirmrand ausweichen, und der Abstand dafür
`content`	`sticky` · `hide_when_detached`	`"partial"` `"always"` · bool	Wie fest es beim Scrollen haftet; ausblenden, wenn der Button verdeckt ist
`content`	`on_open_auto_focus` · `on_close_auto_focus`	Event	Wenn beim Öffnen der Inhalt bzw. beim Schließen der Button den Fokus bekommt
`content`	`on_escape_key_down` · `on_pointer_down_outside`	Event	Esc-Taste, Klick außerhalb
`content`	`on_focus_outside` · `on_interact_outside`	Event	Wenn Fokus oder Interaktion nach außen wandern

trigger und close haben keine eigenen Props, sondern nehmen nur die allgemeinen Events (on_click usw.) entgegen.

Aus der Praxis: ein Kommentarfenster

In ein Popover passt alles. Hier ein Kommentarfenster mit Eingabefeld, Checkbox und Senden-Button neben einem Avatar. Umschließt du den Senden-Button mit popover.close, schließt sich das Fenster im Moment des Klicks. Die Breite gibst du direkt am content an, etwa mit style={"width": 360}.

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

Setzt du rx.inset(side="top") als erstes Kind in den content, bekommst du ein Kopfbild, das ohne den oberen Innenabstand bis an den Rand des Popovers reicht.

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

Trigger-Text aus dem State

Soll ein State-Wert als Button-Text erscheinen, umschließt du ihn einmal mit rx.text, etwa rx.button(rx.text(State.wert)). Laut offizieller Doku funktioniert es nicht wie erwartet, wenn man ihn direkt wie in rx.button(State.wert) übergibt. Wähle unten eine Sprache, und der Button-Text ändert sich.

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

Beim Öffnen und Schließen: on_open_change

on_open_change an popover.root übergibt dem Handler beim Öffnen True und beim Schließen 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",
)

Öffnen und Schließen über den State

Bindest du open und on_open_change gemeinsam an, funktionieren der Stift-Button und der Klick außerhalb wie gewohnt, und zusätzlich kann der Code das Fenster schließen. Ändere unten den Namen und klicke auf Rename: Der Handler speichert den Wert und schließt das Fenster mit self.open = False. Bei jedem Öffnen steht im Eingabefeld wieder der aktuelle Name.

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

Auftrag erledigt

Das kleine Kommentarfenster öffnet sich über den Button „Kommentieren“ unter dem Beitrag. Mit side="top" geht es nach oben auf, mit align="start" bündig zum linken Rand des Buttons.

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

Werkstattnotizen

Besteht aus den vier Teilen root · trigger · content · close. Klick auf trigger öffnet, Klick auf close oder außerhalb schließt.
Position und Größe an content (side, align, side_offset, size), modal an root (modal).
Soll ein State-Wert als Text des Trigger-Buttons erscheinen, mit rx.text umschließen.
on_open_change übergibt den neuen Offen-Wert (bool). Mit open gesteuert, kann der Handler das Fenster schließen.

← Zurück

Overlays · Tooltip

Weiter →

Overlays · Hover Card

Ü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