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

Dynamisches Rendern

Match

rx.match

Offizielle Doku

Werkstattauftrag

Bitte setz in die Lieferbestellung ein Badge für den Bestellstatus. Eingegangen, in Zubereitung, unterwegs, zugestellt und storniert sollen jeweils eigenes Icon und eigene Farbe haben.

rx.match vergleicht einen Wert mit mehreren Fällen und zeigt die Komponente des passenden Falls. Die Idee ist dieselbe wie bei Pythons match·case. rx.cond wählt nur zwischen zwei Zweigen; ab drei Zweigen liest sich rx.match viel leichter als verschachtelte rx.cond. So sieht es aus.

rx.match(
    condition,
    (case_1, component_1),
    (case_2, component_2),
    ...
    default_component,
)

Erstes Argument (condition): der zu vergleichende Wert, meist eine State-Variable.
Tupel (Fall, Komponente): Ist der Wert gleich dem Fall, erscheint diese Komponente. Verglichen wird der Reihe nach von oben.
Das letzte Argument, das kein Tupel ist: der Standardwert (default), wenn kein Fall passt.

Wähl unten eine Rasse, und der passende Satz erscheint. Wählst du pug oder corgi, die zwar in der Liste, aber in keinem Fall stehen, erscheint der Standardwert.

Unknown cat breed selected.

class MatchBasicState(rx.State):
    cat_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "ragdoll", "pug", "corgi"]

    @rx.event
    def set_cat_breed(self, breed: str):
        self.cat_breed = breed


rx.flex(
    rx.match(
        MatchBasicState.cat_breed,
        ("persian", rx.text("Persian cat selected.")),
        ("siamese", rx.text("Siamese cat selected.")),
        ("maine coon", rx.text("Maine Coon cat selected.")),
        ("ragdoll", rx.text("Ragdoll cat selected.")),
        rx.text("Unknown cat breed selected."),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick a breed"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchBasicState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchBasicState.cat_breed,
        on_change=MatchBasicState.set_cat_breed,
    ),
    direction="column",
    spacing="2",
)

Wert ändern

rx.match hat keine Props fürs Aussehen, also änderst du den zu vergleichenden Wert. Stehen wie im zweiten Tupel mehrere Fälle, reicht es, wenn einer davon passt. In einer echten App steht an der Stelle von "paid" eine State-Variable.

Props ausprobieren

Paid

status

rx.match(
    "paid",
    ("paid", rx.badge(rx.icon("credit-card", size=14), "Paid", color_scheme="blue")),
    ("packing", "shipping", rx.badge(rx.icon("truck", size=14), "On the way", color_scheme="orange")),
    ("done", rx.badge(rx.icon("circle-check", size=14), "Delivered", color_scheme="green")),
    rx.badge(rx.icon("circle-help", size=14), "Unknown", color_scheme="gray"),
)

packing und shipping teilen sich ein Badge. Ein Wert ohne Fall (refunded) landet beim Standardwert am Ende.

Argument	Werte	Verwendung
Erstes (`cond`)	Var oder Wert	Der zu vergleichende Wert
`(Fall, …, Ergebnis)`	Tupel (2 oder mehr Einträge)	Ist der Wert gleich einem der vorderen Einträge, wird der letzte zurückgegeben
Letztes Argument	Komponente oder Wert	Standardwert. Bei Komponenten optional (leeres `rx.fragment()`)

Regeln für den Standardwert

Der Standardwert ist das allerletzte Argument, das kein Tupel ist. Jedes Nicht-Tupel gilt als Standardwert, steht eines in der Mitte, ist das ein Fehler.
Es gibt nur einen Standardwert. Zwei sind ein Fehler.
Sind die Ergebnisse Komponenten, darfst du den Standardwert weglassen; dann ist rx.fragment() (nichts) der Standardwert.
Sind die Ergebnisse keine Komponenten (Strings usw.), muss ein Standardwert angegeben werden.
Ein Fall-Tupel braucht mindestens zwei Einträge: Fall und Ergebnis.

Der Code unten zeigt diese Regeln der Reihe nach; außer Nr. 3 schlagen alle schon beim Erzeugen fehl.

# 1) default is not last -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    rx.text("Unknown cat breed selected."),
    ("siamese", rx.text("siamese cat selected")),
)

# 2) two defaults -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
    rx.text("Unknown cat breed selected."),
    rx.text("Another unknown cat breed selected."),
)

# 3) OK: components without a default -> rx.fragment() is the default
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
)

# 4) plain values without a default -> error
rx.match(
    MatchState.cat_breed,
    ("persian", "persian cat selected"),
    ("siamese", "siamese cat selected"),
)

# 5) a case tuple needs at least two items -> error
rx.match(
    MatchState.cat_breed,
    ("persian",),
    ("maine coon", rx.text("Maine Coon cat selected")),
)

Mehrere Werte in einem Fall

Schreib mehrere Fälle in ein Tupel und setz das Ergebnis ans Ende. Der letzte Eintrag eines Tupels ist immer das Ergebnis. Hier sind drei Katzenrassen, zwei Hunderassen und zwei Pferderassen jeweils zu einem Satz zusammengefasst. football und golf kommen nirgends vor, also erscheint der Standardwert.

Unknown animal breed

class MatchMultiState(rx.State):
    animal_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "pug", "corgi", "mustang", "rahvan", "football", "golf"]

    @rx.event
    def set_animal_breed(self, breed: str):
        self.animal_breed = breed


rx.flex(
    rx.match(
        MatchMultiState.animal_breed,
        ("persian", "siamese", "maine coon", rx.text("Breeds of cats.")),
        ("pug", "corgi", rx.text("Breeds of dogs.")),
        ("mustang", "rahvan", rx.text("Breeds of horses.")),
        rx.text("Unknown animal breed"),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick one"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchMultiState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchMultiState.animal_breed,
        on_change=MatchMultiState.set_animal_breed,
    ),
    direction="column",
    spacing="2",
)

Als Prop-Wert

Wie rx.cond kann auch rx.match als Ergebnis Werte liefern und dann an der Stelle einer Prop stehen. Das color_scheme des Badges unten ist bei 1 red, bei 2 blue, bei 6 purple, bei 10 orange und sonst green. Auch Zahlen funktionieren als Fälle.

class MatchPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchPropState.decr, color_scheme="red"),
    rx.badge(
        MatchPropState.value,
        color_scheme=rx.match(
            MatchPropState.value,
            (1, "red"),
            (2, "blue"),
            (6, "purple"),
            (10, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchPropState.incr),
    align_items="center",
    spacing="3",
)

Mehrere Werte in einem Fall gehen bei Props genauso. 1·3·9 sind red, 2·4·5 blue, 6·8·12 purple, 10·15·20·25 orange.

class MatchMultiPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchMultiPropState.decr, color_scheme="red"),
    rx.badge(
        MatchMultiPropState.value,
        color_scheme=rx.match(
            MatchMultiPropState.value,
            (1, 3, 9, "red"),
            (2, 4, 5, "blue"),
            (6, 8, 12, "purple"),
            (10, 15, 20, 25, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchMultiPropState.incr),
    align_items="center",
    spacing="3",
)

Bei wahr/falsch: cond

rx.match ist für den Vergleich mit mehreren Werten da. Gibt es nur True/False, passt rx.cond besser, etwa rx.cond(State.value == 10, "true value", "false value").

Auftrag erledigt

Ein einziger Status-String wird auf fünf Zweige verteilt. Das letzte, cancelled, steht nicht als Fall da, sondern wird vom Standardwert aufgefangen. Ein Klick auf den Button schaltet zum nächsten Status weiter.

Receivedreceived

MATCH_ORDER_STEPS = ["received", "cooking", "delivering", "delivered", "cancelled"]


class MatchOrderState(rx.State):
    status: str = "received"

    @rx.event
    def next_step(self):
        i = MATCH_ORDER_STEPS.index(self.status)
        self.status = MATCH_ORDER_STEPS[(i + 1) % len(MATCH_ORDER_STEPS)]


rx.hstack(
    rx.match(
        MatchOrderState.status,
        ("received", rx.badge(rx.icon("clipboard-check", size=14), "Received", color_scheme="gray")),
        ("cooking", rx.badge(rx.icon("chef-hat", size=14), "Cooking", color_scheme="amber")),
        ("delivering", rx.badge(rx.icon("bike", size=14), "On the way", color_scheme="blue")),
        ("delivered", rx.badge(rx.icon("house", size=14), "Delivered", color_scheme="green")),
        rx.badge(rx.icon("ban", size=14), "Cancelled", color_scheme="red"),
    ),
    rx.button("Next status", on_click=MatchOrderState.next_step, size="1", variant="soft"),
    rx.code(MatchOrderState.status),
    align="center",
    spacing="3",
)

Werkstattnotizen

rx.match(Wert, (Fall, Ergebnis), ..., Standardwert). Ab drei Zweigen statt verschachteltem cond.
Mehrere Fälle in einem Tupel: ("a", "b", Ergebnis). Der letzte Eintrag ist das Ergebnis.
Ein Standardwert ganz am Ende. Bei Komponenten optional, bei Werten Pflicht.
Liefert es Werte, passt es in Props wie color_scheme.
Für zwei Zweige wahr/falsch: rx.cond.

← Zurück

Dynamisches Rendern · Cond

Weiter →

Dynamisches Rendern · Foreach

Ü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