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

Grid

rx.grid

Offizielle Doku

Werkstattauftrag

Bitte mehrere Fotos wie ein Schachbrett aufreihen, immer drei pro Zeile.

rx.grid ist ein Behälter, der seine Kinder wie auf einem Schachbrett in Zeilen und Spalten setzt. Während Flex entlang einer Linie anordnet, richtet Grid Zeilen und Spalten gleichzeitig aus. Legst du mit columns oder rows die Anzahl der Zellen fest, füllen die Kinder die Zellen der Reihe nach.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    columns="3",
    spacing="4",
    width="100%",
)

Props ausprobieren

Ändere Spaltenzahl, horizontale und vertikale Abstände und die Ausrichtung in den Zellen. Nur Card 2 ist höher, deshalb sieht man den Unterschied bei align an den anderen Karten derselben Zeile.

Props ausprobieren

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

columns

spacing_x

spacing_y

align

rx.grid(
    rx.card("Card 1"),
    rx.card("Card 2", height="5rem"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    rx.card("Card 5"),
    rx.card("Card 6"),
    rx.card("Card 7"),
    columns="3",
    spacing_x="3",
    spacing_y="3",
    align="stretch",
    width="100%",
)

columns ist die Anzahl der Spalten, spacing_x der Abstand zwischen Spalten, spacing_y der zwischen Zeilen. align bestimmt die vertikale Position in der Zelle.

Prop	Werte	Standard	Verwendung
`columns`	`"1"` ~ `"9"` oder CSS-String (`"120px 1fr"`)	keiner	Anzahl der Spalten oder Vorlage für die Spaltenbreiten
`rows`	`"1"` ~ `"9"` oder CSS-String	keiner	Anzahl der Zeilen oder Vorlage für die Zeilenhöhen
`flow`	`"row"` `"column"` `"dense"` `"row-dense"` `"column-dense"`	`"row"`	Reihenfolge, in der die Kinder die Zellen füllen
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"stretch"`	Vertikale Ausrichtung in der Zelle
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Horizontale Ausrichtung der Spalten. Nur sichtbar, wenn Platz übrig ist
`spacing`	`"0"` ~ `"9"`	keiner	Abstand zwischen Zeilen und Spalten
`spacing_x` `spacing_y`	`"0"` ~ `"9"`	keiner	Abstand zwischen Spalten bzw. Zeilen getrennt
`as_child`	`True` / `False`	`False`	Als Kind-Element rendern und die Props zusammenführen

Jeder Prop kann mit rx.breakpoints(...) je nach Bildschirmbreite einen anderen Wert bekommen.

Über Zeilen festlegen

Gibst du rows="3" zusammen mit flow="column" an, füllen die Kinder erst drei Zellen von oben nach unten und wechseln dann in die nächste Spalte. Die Spaltenbreite richtet sich dabei nach dem Inhalt, es bleibt also Platz übrig, und justify="between" zieht die Spalten bis an beide Enden auseinander.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    rows="3",
    flow="column",
    justify="between",
    spacing="4",
    width="100%",
)

Spaltenbreiten selbst festlegen und mehrere Zellen belegen

Schreibst du statt einer Zahl einen Wert für CSS grid-template-columns in columns, kannst du jeder Spalte eine eigene Breite geben. "120px 1fr" macht die erste Spalte 120px breit und gibt den Rest der zweiten. Bekommt ein Kind die CSS-Eigenschaft grid_column="span 2", belegt es zwei Spalten, mit grid_row="span 2" zwei Zeilen.

Sidebar

Content

Wide

Tall

rx.vstack(
    rx.grid(
        rx.card("Sidebar"),
        rx.card("Content"),
        columns="120px 1fr",
        spacing="3",
        width="100%",
    ),
    rx.grid(
        rx.card("Wide", grid_column="span 2"),
        rx.card("1"),
        rx.card("2"),
        rx.card("3"),
        rx.card("Tall", grid_row="span 2"),
        rx.card("4"),
        rx.card("5"),
        columns="3",
        spacing="3",
        width="100%",
    ),
    width="100%",
)

flow="dense": Lücken füllen

Folgen zwei doppelt breite Karten aufeinander, bleibt am Zeilenende eine Lücke. Das standardmäßige flow="row" (links) hält die Reihenfolge ein und lässt die Lücke stehen, flow="dense" (rechts) holt kleinere Karten von weiter hinten nach vorn in die Lücke.

rx.flex(
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="row",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="dense",
        spacing="2",
        width="45%",
    ),
    justify="between",
    width="100%",
)

Spaltenzahl je nach Bildschirmbreite

Mit columns=rx.breakpoints(...) gibt es auf schmalen Bildschirmen 1 Spalte, ab xs (520px) 2 und ab md (1024px) 3 Spalten. Ändere ruhig die Breite des Browserfensters.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

rx.grid(
    rx.foreach(rx.Var.range(6), lambda i: rx.card(f"Card {i + 1}")),
    columns=rx.breakpoints(initial="1", xs="2", md="3"),
    spacing="3",
    width="100%",
)

Auftrag erledigt

Sechs Fotos werden mit columns="3" aufgereiht, und jedes Bild füllt mit width="100%" seine Zelle. Weil alle Zellen gleich breit sind, sind auch die Fotos gleich groß.

rx.grid(
    *[
        rx.image(
            src=f"https://picsum.photos/id/{n}/300/300",
            width="100%",
            height="auto",
            border_radius="6px",
        )
        for n in [10, 11, 12, 13, 14, 15]
    ],
    columns="3",
    spacing="2",
    width="100%",
    max_width="420px",
)

Werkstattnotizen

rx.grid richtet Zeilen und Spalten gleichzeitig aus. Die Zellenzahl legst du mit columns oder rows fest.
columns akzeptiert "1" bis "9" oder einen CSS-Vorlagen-String wie "120px 1fr".
Abstände mit spacing (alles), spacing_x (zwischen Spalten), spacing_y (zwischen Zeilen).
flow bestimmt die Füllreihenfolge, grid_column="span 2" an einem Kind lässt es mehrere Zellen belegen.
Die Spaltenzahl je nach Bildschirmbreite ändern, etwa mit columns=rx.breakpoints(initial="1", md="3").

← Zurück

Layout · Stack

Weiter →

Layout · Container

Ü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