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

Datenanzeige

Data List

rx.data_list.rootrx.data_list.itemrx.data_list.labelrx.data_list.value

Offizielle Doku

Werkstattauftrag

Ordne auf der Bestelldetailseite Status, Bestelldatum, Sendungsnummer und Gesamtsumme sauber im Format „Name: Wert“ an.

rx.data_list zeigt Paare aus Name und Wert untereinander. Das passt gut, um Metadaten zu ordnen – Nutzerinformationen, Bestelldetails oder Dateieigenschaften. In rx.data_list.root legst du Einträge vom Typ rx.data_list.item, und jeder Eintrag bekommt ein label (Name) und einen value (Wert).

Status: Authorized
ID: U-474747

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status"),
        rx.data_list.value("Authorized"),
    ),
    rx.data_list.item(
        rx.data_list.label("ID"),
        rx.data_list.value("U-474747"),
    ),
)

Props ausprobieren

orientation, size und trim gehören an root, align an item und color_scheme an label.

Props ausprobieren

Status: Authorized
Name: Developer Success
Email: success@reflex.dev

orientation

size

trim

align

label_color

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Status", color_scheme="gray"),
        rx.data_list.value(rx.badge("Authorized", radius="full")),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Name", color_scheme="gray"),
        rx.data_list.value("Developer Success"),
        align="center",
    ),
    rx.data_list.item(
        rx.data_list.label("Email", color_scheme="gray"),
        rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        align="center",
    ),
    orientation="horizontal",
    size="2",
    trim="normal",
)

Mit orientation vertical rückt der Name über den Wert. align ist die vertikale Ausrichtung von Name und Wert innerhalb eines Eintrags.

Teil	Prop	Werte	Verwendung
`root`	`orientation`	`"horizontal"` (Standard) `"vertical"`	Name und Wert nebeneinander oder übereinander
`root`	`size`	`"1"` `"2"` (Standard) `"3"`	Schriftgröße und Zeilenabstand
`root`	`trim`	`"normal"` `"start"` `"end"` `"both"`	Kürzt den Schriftweißraum über der ersten und unter der letzten Zeile
`item`	`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	Vertikale Ausrichtung von Name und Wert
`label`	`width` `min_width` `max_width`	CSS-Länge	Breite der Namensspalte
`label`	`color_scheme`	Radix-Farbname	Farbe des Namenstexts
`value`	(keine)		Nimmt beliebige Komponenten als Kinder an

Alles an der Stelle des Werts

In value passen nicht nur Texte, sondern auch Komponenten wie Badges, Code oder Links. Legst du die Liste wie im Beispiel der offiziellen Doku in eine Card, entsteht ein Infokasten. Hat ein Wert eine andere Höhe, etwa ein Badge, gibst du diesem Eintrag align="center", damit er mittig zum Namen steht.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: success@reflex.dev
Company: Reflex

rx.card(
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Authorized", variant="soft", radius="full")),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("ID"),
            rx.data_list.value(rx.code("U-474747")),
        ),
        rx.data_list.item(
            rx.data_list.label("Name"),
            rx.data_list.value("Developer Success"),
            align="center",
        ),
        rx.data_list.item(
            rx.data_list.label("Email"),
            rx.data_list.value(rx.link("success@reflex.dev", href="mailto:success@reflex.dev")),
        ),
        rx.data_list.item(
            rx.data_list.label("Company"),
            rx.data_list.value(rx.link("Reflex", href="https://reflex.dev", is_external=True)),
        ),
    ),
)

Ausrichtung

orientation gehört an root. Auf schmalen Bildschirmen liest sich übereinander (vertical) leichter. Wie beim dritten Beispiel kannst du je nach Bildschirmbreite verschiedene Werte angeben (schmal vertical, ab sm horizontal).

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

Plan: Pro
Seats: 12

rx.flex(
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="horizontal",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation="vertical",
    ),
    rx.data_list.root(
        rx.data_list.item(rx.data_list.label("Plan"), rx.data_list.value("Pro")),
        rx.data_list.item(rx.data_list.label("Seats"), rx.data_list.value("12")),
        orientation={"initial": "vertical", "sm": "horizontal"},
    ),
    spacing="6",
    wrap="wrap",
)

Die Namensspalte anpassen

Legst du mit width am label die Breite der Namensspalte fest, beginnen die Werte mehrerer Listen auf derselben Linie. color_scheme ändert die Farbe des Namenstexts.

Owner: Ada Lovelace
Repository: reflex-dev/reflex

rx.data_list.root(
    rx.data_list.item(
        rx.data_list.label("Owner", width="80px", color_scheme="indigo"),
        rx.data_list.value("Ada Lovelace"),
    ),
    rx.data_list.item(
        rx.data_list.label("Repository", width="80px", color_scheme="indigo"),
        rx.data_list.value("reflex-dev/reflex"),
    ),
)

Einträge aus Daten erzeugen

Liegen die Einträge als Daten vor, erzeugst du sie mit rx.foreach Zeile für Zeile. Auch die Prop-Vorschau der offiziellen Doku arbeitet so.

Status: Authorized
ID: U-474747
Name: Developer Success
Email: foo@reflex.dev

class DataListUserState(rx.State):
    fields: list[list[str]] = [
        ["Status", "Authorized"],
        ["ID", "U-474747"],
        ["Name", "Developer Success"],
        ["Email", "foo@reflex.dev"],
    ]


rx.data_list.root(
    rx.foreach(
        DataListUserState.fields,
        lambda f: rx.data_list.item(rx.data_list.label(f[0]), rx.data_list.value(f[1])),
    ),
)

Auftrag erledigt

Die Bestellnummer wird zur Überschrift, der Status zum Badge, die Sendungsnummer zu Code und die Summe erscheint fett.

Order #1024

Status: Shipped
Placed: 2026-10-20
Tracking: 1Z999AA10123456784
Total: $48.00

rx.card(
    rx.heading("Order #1024", size="4", margin_bottom="3"),
    rx.data_list.root(
        rx.data_list.item(
            rx.data_list.label("Status"),
            rx.data_list.value(rx.badge("Shipped", color_scheme="green", radius="full")),
            align="center",
        ),
        rx.data_list.item(rx.data_list.label("Placed"), rx.data_list.value("2026-10-20")),
        rx.data_list.item(rx.data_list.label("Tracking"), rx.data_list.value(rx.code("1Z999AA10123456784"))),
        rx.data_list.item(rx.data_list.label("Total"), rx.data_list.value(rx.text("$48.00", weight="bold"))),
    ),
    max_width="420px",
)

Werkstattnotizen

Aufbau: data_list.root > data_list.item > (data_list.label, data_list.value).
root: orientation · size · trim, item: align, label: width · color_scheme.
In value kommt jede beliebige Komponente – Badge, Code, Link usw.
Sind die Daten eine Liste, erzeugst du die items mit rx.foreach.

← Zurück

Datenanzeige · List

Weiter →

Datenanzeige · Code Block

Ü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