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

List

rx.listrx.list.unorderedrx.list.orderedrx.list.item

Offizielle Doku

Werkstattauftrag

Zeig auf der Rezeptseite die Zutaten als Aufzählung mit Punkten und die Zubereitungsschritte als nummerierte Liste.

rx.list stapelt Einträge von oben nach unten. Spielt die Reihenfolge keine Rolle, nimmst du rx.list.unordered (HTML ul) mit Punkten; ist sie wichtig, rx.list.ordered (HTML ol) mit Nummern. Jeder Eintrag ist ein rx.list.item (HTML li).

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.flex(
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.ordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    spacing="6",
)

Props ausprobieren

Bei nummerierten Listen kannst du die Darstellung ändern und rückwärts zählen lassen. Die Startnummer start folgt in einem Abschnitt weiter unten.

Props ausprobieren

Preheat the oven
Mix the batter
Bake for 30 minutes

list_style_type

reversed

rx.list.ordered(
    rx.list.item("Preheat the oven"),
    rx.list.item("Mix the batter"),
    rx.list.item("Bake for 30 minutes"),
    list_style_type="decimal",
    reversed=False,
)

list_style_type legt das Aufzählungszeichen fest, reversed lässt rückwärts zählen.

Prop	Gilt für	Werte	Standard	Verwendung
`list_style_type`	alle drei Listen	Punkte: `"disc"` `"circle"` `"square"` `"none"`, Nummern: `"decimal"` `"lower-roman"` `"upper-alpha"` …	`list`: `"none"`, `unordered`: `"disc"`, `ordered`: `"decimal"`	Zeichen vor dem Eintrag
`items`	alle drei Listen	Liste (auch ein State-Wert)	keiner	Übergibt die Eintragstexte gesammelt statt als Kinder
`start`	`ordered`	Ganzzahl	`1`	Erste Nummer
`reversed`	`ordered`	`True` / `False`	`False`	Zählt die Nummern rückwärts
`type`	`ordered`	`"1"` `"a"` `"A"` `"i"` `"I"`	keiner	HTML-Nummerierungsart; meist nimmt man `list_style_type`

Aufzählungszeichen

Punktlisten akzeptieren CSS-Werte wie "disc" (Standard), "circle" und "square", nummerierte Listen "decimal" (Standard), "upper-roman" oder "lower-alpha". unordered und ordered lassen links 1.5rem Abstand für das Zeichen.

disc
disc

circle
circle

square
square

upper-roman
upper-roman

lower-alpha
lower-alpha

rx.flex(
    rx.list.unordered(rx.list.item("disc"), rx.list.item("disc"), list_style_type="disc"),
    rx.list.unordered(rx.list.item("circle"), rx.list.item("circle"), list_style_type="circle"),
    rx.list.unordered(rx.list.item("square"), rx.list.item("square"), list_style_type="square"),
    rx.list.ordered(rx.list.item("upper-roman"), rx.list.item("upper-roman"), list_style_type="upper-roman"),
    rx.list.ordered(rx.list.item("lower-alpha"), rx.list.item("lower-alpha"), list_style_type="lower-alpha"),
    spacing="5",
    wrap="wrap",
)

Startnummer und Rückwärtszählen

start legt die erste Nummer fest; das brauchst du, wenn die Nummerierung an eine vorherige Liste anschließen soll. reversed=True zählt von der größten Nummer abwärts. Auch bei Buchstaben (upper-alpha) beginnt die Liste mit start=3 bei C.

Seven
Eight
Nine

Three
Two
One

Alpha
Bravo

rx.flex(
    rx.list.ordered(rx.list.item("Seven"), rx.list.item("Eight"), rx.list.item("Nine"), start=7),
    rx.list.ordered(rx.list.item("Three"), rx.list.item("Two"), rx.list.item("One"), reversed=True),
    rx.list.ordered(rx.list.item("Alpha"), rx.list.item("Bravo"), list_style_type="upper-alpha", start=3),
    spacing="6",
    wrap="wrap",
)

Listen ohne Zeichen

Mit list_style_type="none" verschwinden Punkte und Nummern. Das entspricht praktisch einem rx.list() ohne Zeichen, nur bleibt bei unordered und ordered der linke Abstand erhalten. Die offizielle Doku schreibt, Listen basierten auf flex und erbten all dessen Props; in Reflex 0.10 sind Listen aber gewöhnliche HTML-Elemente, und nur etwa gap wird gesondert behandelt.

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.hstack(
    rx.list(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
        list_style_type="none",
    ),
    spacing="6",
)

Icon-Listen

Entfernst du die Zeichen und setzt vor jeden Eintrag ein Icon, erhältst du eine Checkliste. Icons in rx.list.item bekommen automatisch display: inline, damit sie mit dem Text in einer Zeile stehen.

Allowed
Not
Settings

rx.list(
    rx.list.item(rx.icon("circle_check_big", color="green"), " Allowed"),
    rx.list.item(rx.icon("octagon_x", color="red"), " Not"),
    rx.list.item(rx.icon("settings", color="grey"), " Settings"),
    list_style_type="none",
)

State-Listen mit items darstellen

Statt die Kinder einzeln zu schreiben, kannst du items eine Liste übergeben; für jeden Eintrag entsteht dann ein rx.list.item. Bei einem State-Wert wird intern rx.foreach verwendet, sodass sich die Liste mit dem Wert ändert.

Buy milk
Walk the dog

class ListTodoState(rx.State):
    todos: list[str] = ["Buy milk", "Walk the dog"]
    new_todo: str = ""

    @rx.event
    def set_list_new_todo(self, value: str):
        self.new_todo = value

    @rx.event
    def add_list_todo(self):
        if self.new_todo.strip():
            self.todos = self.todos + [self.new_todo.strip()[:40]]
            self.new_todo = ""

    @rx.event
    def clear_list_todos(self):
        self.todos = []


rx.vstack(
    rx.hstack(
        rx.input(value=ListTodoState.new_todo, on_change=ListTodoState.set_list_new_todo, placeholder="New item"),
        rx.button("Add", on_click=ListTodoState.add_list_todo),
        rx.button("Clear", on_click=ListTodoState.clear_list_todos, variant="soft", color_scheme="gray"),
    ),
    rx.list.ordered(items=ListTodoState.todos),
)

Auftrag erledigt

Zutaten haben keine Reihenfolge, also eine Punktliste; bei der Zubereitung kommt es auf die Reihenfolge an, also eine nummerierte Liste.

Ingredients

2 eggs
200 g flour
1 cup milk

Steps

Whisk the eggs and milk.
Fold in the flour.
Cook on a hot pan.

rx.flex(
    rx.box(
        rx.text("Ingredients", weight="bold"),
        rx.list.unordered(
            rx.list.item("2 eggs"),
            rx.list.item("200 g flour"),
            rx.list.item("1 cup milk"),
        ),
    ),
    rx.box(
        rx.text("Steps", weight="bold"),
        rx.list.ordered(
            rx.list.item("Whisk the eggs and milk."),
            rx.list.item("Fold in the flour."),
            rx.list.item("Cook on a hot pan."),
        ),
    ),
    spacing="6",
    wrap="wrap",
)

Werkstattnotizen

Ungeordnete Listen: rx.list.unordered, geordnete: rx.list.ordered, Einträge: rx.list.item.
list_style_type ändert das Aufzählungszeichen; mit "none" verschwindet es (Standard bei rx.list).
ordered hat start (erste Nummer) und reversed (rückwärts).
Mit items=[…] oder items=State.liste lassen sich alle Einträge auf einmal übergeben.

← Zurück

Datenanzeige · Callout

Weiter →

Datenanzeige · Data List

Ü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