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

Layout

Stack

rx.stackrx.hstackrx.vstack

Offizielle Doku

Werkstattauftrag

Bitte die Einträge der Einstellungsseite mit gleichem Abstand von oben nach unten stapeln, und in jedem Eintrag Icon und Text nebeneinander setzen.

Ein Stack stapelt seine Kinder in eine Richtung und lässt dazwischen einen gleichmäßigen Abstand. rx.vstack stapelt vertikal, rx.hstack horizontal, und bei rx.stack legst du die Richtung selbst fest. Alle drei bauen auf rx.flex auf und nutzen dieselben Props wie Flex. Der Unterschied liegt in den Standardwerten: Abstand (spacing="3") und Ausrichtung (align="start") sind schon vorgegeben.

Card 1

Card 2

Card 3

rx.vstack(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
)

Props ausprobieren

Ändere Richtung, Abstand und Ausrichtung von rx.stack. Nur die mittlere Box ist höher, deshalb sieht man in horizontaler Richtung den Unterschied bei align.

Props ausprobieren

Example

direction

spacing

align

justify

rx.stack(
    rx.box("Example", background_color="orange", border_radius="3px", padding="4px", width="20%"),
    rx.box("Example", background_color="lightblue", border_radius="3px", padding="4px", width="30%", height="3rem"),
    rx.box("Example", background_color="lightgreen", border_radius="3px", padding="4px", width="40%"),
    direction="column",
    spacing="3",
    align="start",
    justify="start",
    width="100%",
    min_height="12rem",
    padding="8px",
    border="1px dashed var(--gray-7)",
)

Mit direction auf column entspricht das einem vstack, mit row einem hstack. Bei spacing 0 liegen die Kinder direkt aneinander.

Prop	Werte	Standard	Verwendung
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`vstack` `"column"`, `hstack` `"row"`, `stack` keiner (horizontal)	Stapelrichtung
`spacing`	`"0"` ~ `"9"`	`"3"`	Abstand zwischen den Kindern
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"start"`	Ausrichtung auf der Querachse. Bei stretch füllen die Kinder die Querachse ganz aus
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Ausrichtung in Stapelrichtung (Hauptachse)
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Ob bei Überlauf in die nächste Zeile umgebrochen wird
`as_child`	`True` / `False`	`False`	Als Kind-Element rendern und die Props zusammenführen

Alle Props sind dieselben wie bei Flex und können mit rx.breakpoints(...) je nach Bildschirmbreite andere Werte bekommen.

rx.stack: die Richtung selbst bestimmen

rx.stack hat keine Standardrichtung und stapelt deshalb ohne Angabe horizontal. Die offizielle Doku legt die Richtung mit der CSS-Eigenschaft flex_direction fest; die installierte Version 0.10 hat zusätzlich den Flex-Prop direction, beides funktioniert. Unten links steht flex_direction="row", rechts direction="column".

Example

rx.flex(
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        flex_direction="row",
        width="100%",
    ),
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        direction="column",
        width="100%",
    ),
    width="100%",
)

hstack

Stapelt horizontal. Gibst du den Kindern unterschiedliche Breiten, nehmen sie entsprechend viel Platz ein.

Example

rx.hstack(
    rx.box("Example", bg="red", border_radius="3px", width="10%"),
    rx.box("Example", bg="orange", border_radius="3px", width="10%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="60%"),
    width="100%",
)

vstack

Stapelt vertikal. Das brauchst du fast überall, wo eine Seite von oben nach unten aufgebaut wird.

Example

rx.vstack(
    rx.box("Example", bg="red", border_radius="3px", width="20%"),
    rx.box("Example", bg="orange", border_radius="3px", width="40%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="60%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="80%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="100%"),
    width="100%",
)

Wenn die Kinder nicht die volle Breite füllen

Der Standardwert von align ist bei Stack "start", deshalb sind Buttons in einem vstack nur so breit wie ihr Text. Sollen die Kinder die ganze Breite füllen, gib align="stretch" an oder den Kindern width="100%". Links der Standard, rechts stretch.

rx.flex(
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        width="140px",
    ),
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        align="stretch",
        width="140px",
    ),
    spacing="6",
)

Wie auf einer echten Seite

Zwei Boxen mit Überschrift und Text stehen per hstack nebeneinander. Statt spacing kannst du mit CSS gap auch direkt eine beliebige Länge wie "2em" angeben.

Saving Money

Set aside a small part of every pay day.

Spending Money

Balance today's wishes and tomorrow's needs.

rx.hstack(
    rx.box(
        rx.heading("Saving Money", as_="h2", size="4"),
        rx.text("Set aside a small part of every pay day.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    rx.box(
        rx.heading("Spending Money", as_="h2", size="4"),
        rx.text("Balance today's wishes and tomorrow's needs.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    gap="2em",
)

Auftrag erledigt

Außen stapelt ein vstack die Einträge, in jedem Eintrag setzt ein hstack Icon, Text und Schalter nebeneinander. Das rx.spacer() in der Mitte schiebt den Schalter ganz nach rechts.

Notifications

Dark mode

Weekly email

rx.vstack(
    rx.hstack(rx.icon("bell"), rx.text("Notifications"), rx.spacer(), rx.switch(default_checked=True), align="center", width="100%"),
    rx.hstack(rx.icon("moon"), rx.text("Dark mode"), rx.spacer(), rx.switch(), align="center", width="100%"),
    rx.hstack(rx.icon("mail"), rx.text("Weekly email"), rx.spacer(), rx.switch(), align="center", width="100%"),
    spacing="4",
    width="100%",
    max_width="320px",
)

Werkstattnotizen

vstack vertikal, hstack horizontal, bei stack bestimmt direction die Richtung.
Alle drei bauen auf Flex auf und nutzen direction · align · justify · wrap · spacing unverändert.
Die Standardwerte unterscheiden sich: spacing "3", align "start".
Damit die Kinder die Querachse ausfüllen: align="stretch" oder width="100%" an den Kindern.
Ein inneres hstack + rx.spacer(), um etwas an ein Ende zu schieben, ist ein gängiges Muster.

← Zurück

Layout · Flex

Weiter →

Layout · Grid

Ü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