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

Hover Card

rx.hover_card.rootrx.hover_card.triggerrx.hover_card.content

Offizielle Doku

Werkstattauftrag

Fährt man mit der Maus über den Autorennamen eines Kommentars, soll eine kleine Karte mit Foto und Kurzvorstellung dieser Person aufspringen.

rx.hover_card ist eine Karte, die erscheint, wenn man mit der Maus über ein Element wie einen Link fährt. Sie ist größer als ein Tooltip und eignet sich für Vorschauen mit reichhaltigem Inhalt wie Fotos oder mehrzeiligem Text. Sie besteht aus drei Teilen.

hover_card.root: umschließt alle Teile der Hover Card.
hover_card.trigger: umschließt das Element (meist einen Link), das die Karte beim Darüberfahren öffnet.
hover_card.content: der Inhalt, der im geöffneten Zustand erscheint.

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.text("This is the hovercard content."),
        ),
    ),
)

Props ausprobieren

Position und Größe gehören an hover_card.content. Ändere einen Wert und fahre dann mit der Maus über den Link.

Props ausprobieren

Hover over me

text

side

align

size

avoid_collisions

rx.hover_card.root(
    rx.hover_card.trigger(rx.link("Hover over me", underline="always")),
    rx.hover_card.content(
        rx.text("Preview of the linked page"),
        side="bottom",
        align="center",
        size="2",
        avoid_collisions=True,
    ),
)

size bestimmt mit "1" bis "3" den Innenabstand. Standardmäßig erscheint die Karte unten (bottom) und mittig (center).

Teil	Prop	Werte	Verwendung
`root`	`open_delay`	Millisekunden (Ganzzahl)	Wartezeit nach dem Darüberfahren, bis sie sich öffnet
`root`	`close_delay`	Millisekunden (Ganzzahl)	Wartezeit nach dem Verlassen, bis sie sich schließt
`root`	`open` · `default_open`	`True` / `False`	Offen-Zustand über den State steuern (kontrolliert) · anfangs offen (unkontrolliert)
`root`	`on_open_change`	Event	Beim Öffnen oder Schließen; übergibt den neuen Offen-Wert (bool)
`content`	`side` · `align`	Positionsname	Seite und Ausrichtung
`content`	`side_offset` · `align_offset`	Ganzzahl (px)	Abstand zum Link bzw. zusätzliche Verschiebung von der Ausrichtung
`content`	`size`	`"1"` `"2"` `"3"`	Größe des Innenabstands
`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 sie beim Scrollen haftet; ausblenden, wenn der Link verdeckt ist

trigger und content haben nur die allgemeinen Events, keine eigens definierten.

Reichhaltiger Inhalt

Auch Grids und Bilder passen in den content. Mit rx.inset(side="left") reicht das Bild bis an den linken Rand der Karte, rechts daneben stehen Titel und Beschreibung. Die Kartenbreite legst du direkt am content fest, etwa mit style={"width": 360}.

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.grid(
                rx.inset(
                    side="left",
                    pr="current",
                    background="url('https://picsum.photos/id/1062/240/320') center/cover",
                    height="full",
                ),
                rx.box(
                    rx.heading("Kitsune", size="3"),
                    rx.text("A curious fox who lives in the workshop and inspects every new part.", size="2"),
                    padding_left="12px",
                ),
                columns="120px 1fr",
            ),
            style={"width": 360},
        ),
    ),
)

Wann sie aufgeht: open_delay und close_delay

Springt die Karte schon auf, wenn die Maus nur kurz vorbeihuscht, nervt das. open_delay legt in Millisekunden fest, wie lange bis zum Öffnen gewartet wird, close_delay, wie lange bis zum Schließen. Fahre nacheinander über beide Links und spüre den Unterschied.

Fast (open_delay=100)Slow (open_delay=1200)

rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Fast (open_delay=100)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 100 ms")),
        open_delay=100,
        close_delay=100,
    ),
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Slow (open_delay=1200)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 1200 ms")),
        open_delay=1200,
        close_delay=600,
    ),
    spacing="5",
    wrap="wrap",
)

Beim Öffnen und Schließen: on_open_change

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

Opened or closed: 0 times

Hover card open: no

Hover over the text to see the hover card. Hover over me

class HoverCardEventState(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: ", HoverCardEventState.num_opens, " times"),
    rx.text("Hover card open: ", rx.cond(HoverCardEventState.opened, "yes", "no")),
    rx.text(
        "Hover over the text to see the hover card. ",
        rx.hover_card.root(
            rx.hover_card.trigger(
                rx.link("Hover over me", color_scheme="blue", underline="always"),
            ),
            rx.hover_card.content(
                rx.text("This is the hover card content."),
            ),
            on_open_change=HoverCardEventState.count_opens,
        ),
    ),
    direction="column",
    spacing="3",
)

Öffnen und Schließen über den State

Verbindest du open mit einem State-Wert, kannst du die Karte per Schalter offen halten. Weil on_open_change am selben Handler hängt, bewegt sich der Schalter mit, wenn du mit der Maus über den Link fährst und ihn wieder verlässt.

Release notes

open

class HoverCardControlState(rx.State):
    pinned: bool = False

    @rx.event
    def set_pinned(self, value: bool):
        self.pinned = value


rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Release notes", underline="always")),
        rx.hover_card.content(rx.text("v2.4: faster search, new export button.", size="2")),
        open=HoverCardControlState.pinned,
        on_open_change=HoverCardControlState.set_pinned,
    ),
    rx.switch(checked=HoverCardControlState.pinned, on_change=HoverCardControlState.set_pinned),
    rx.text("open", size="2", color_scheme="gray"),
    spacing="3",
    align="center",
)

Auftrag erledigt

Fährt man mit der Maus über den Link mit dem Autorennamen, erscheint eine Karte mit Avatar, Name und Kurzvorstellung. Damit sie nicht schon bei einer vorbeihuschenden Maus aufspringt, erhöhen wir open_delay ein wenig.

Great tutorial! — @mina

rx.text(
    "Great tutorial! — ",
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("@mina", weight="bold")),
        rx.hover_card.content(
            rx.flex(
                rx.avatar(src="https://picsum.photos/id/64/120/120", fallback="MK", size="4", radius="full"),
                rx.box(
                    rx.heading("Mina Kim", size="3"),
                    rx.text("@mina", size="2", color_scheme="gray"),
                    rx.text("Frontend developer. Writes about Python web apps.", size="2", margin_top="6px"),
                ),
                spacing="3",
            ),
            side="top",
            align="start",
            style={"width": 300},
        ),
        open_delay=400,
    ),
    size="2",
)

Werkstattnotizen

Drei Teile: root · trigger · content. Öffnet beim Darüberfahren, schließt beim Verlassen (kein Klick nötig).
Mit open_delay · close_delay (Millisekunden, Ganzzahl) reagiert sie nicht auf vorbeihuschende Mäuse.
Position und Größe an content (side, align, side_offset, size "1" bis "3").
on_open_change übergibt den neuen Offen-Wert (bool). Wer mit open steuert, bindet es mit an.
Auf Touchscreens ohne Maus öffnet sie sich nicht. Wichtige Inhalte gehören also auch auf die verlinkte Seite.

← Zurück

Overlays · Popover

Weiter →

Overlays · Dialog

Ü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