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

Cond

rx.cond

Offizielle Doku

Werkstattauftrag

Bitte setz in die Kopfzeile des Shops einen Login-Button. Nach dem Einloggen sollen an seiner Stelle der Benutzername und ein Logout-Button erscheinen.

rx.cond(Bedingung, A, B) zeigt A, wenn die Bedingung wahr ist, sonst B. Als Bedingung dient meist ein State-Wert. Pythons if läuft nur einmal beim Erzeugen der Seite und kann daher nicht auf State-Werte reagieren. Soll bei jeder Wertänderung im Browser neu entschieden werden, nimm rx.cond.

Text 1

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(
        CondBasicState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)

Bedingung umschalten

rx.cond hat keine Props fürs Aussehen. Schalte stattdessen die Bedingung selbst an und aus. Gibst du wie in der zweiten Zeile zwei Werte statt Komponenten an (hier Farbnamen), wird rx.cond zu einer Var, die einen Wert auswählt, und passt an die Stelle einer Prop.

Props ausprobieren

Text 1

Status

show

rx.hstack(
    rx.cond(
        True,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
    rx.badge(
        "Status",
        color_scheme=rx.cond(True, "green", "red"),
    ),
    spacing="4",
    align="center",
)

show entscheidet, welcher Text erscheint, ok das color_scheme des Badges. In einer echten App steht hier ein State-Wert.

Argument	Werte	Verwendung
Erstes (`cond`)	Var (meist bool)	Auswahlkriterium. Leerer String, 0, leere Liste usw. gelten als falsch
Zweites	Komponente oder Wert	Was bei wahr angezeigt wird
Drittes	Komponente oder Wert	Was bei falsch angezeigt wird. Bei Komponenten optional

Die zweite Komponente weglassen

Das dritte Argument ist optional. Lässt du es weg, erscheint bei falscher Bedingung nichts. Das ist praktisch für „nur anzeigen, wenn vorhanden“. Als Prop-Wert (mit zwei Werten) darf es nicht fehlen.

This text appears when condition is True

This text is always visible

class CondOptionalState(rx.State):
    show_optional: bool = True

    @rx.event
    def toggle_optional(self):
        self.show_optional = not self.show_optional


rx.vstack(
    rx.button("Toggle", on_click=CondOptionalState.toggle_optional),
    rx.cond(
        CondOptionalState.show_optional,
        rx.text("This text appears when condition is True", color="green"),
    ),
    rx.text("This text is always visible", color="gray"),
)

Verneinung: ~

Ein ~ vor einer Var kehrt die Bedingung um (Pythons not). Bei Vars funktioniert not nicht, daher ~. Die beiden Zeilen unten erscheinen immer gegensätzlich.

Text 1

Text 2

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
    rx.cond(~CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
)

Mehrere Bedingungen: & und |

Vars verknüpfst du statt mit and·or mit & (und) und | (oder). &·| werden vor >= ausgewertet, also setzt du Vergleiche immer in Klammern. Unten darf arbeiten, wer zwischen 18 und 65 ist, und wer unter 13 oder ab 65 ist, bekommt ein Rabatt-Badge.

Age: 19

You can work!

import random


class CondComplexState(rx.State):
    age: int = 19

    @rx.event
    def change(self):
        self.age = random.randint(0, 100)


rx.vstack(
    rx.button("Random age", on_click=CondComplexState.change),
    rx.text(f"Age: {CondComplexState.age}"),
    rx.cond(
        (CondComplexState.age >= 18) & (CondComplexState.age <= 65),
        rx.text("You can work!", color="green"),
        rx.text("You cannot work!", color="red"),
    ),
    rx.cond(
        (CondComplexState.age < 13) | (CondComplexState.age >= 65),
        rx.badge("Discount ticket", color_scheme="orange"),
    ),
)

Verschachtelt: if · elif · else

Steckst du an die dritte Stelle von rx.cond ein weiteres rx.cond, wird daraus ein elif. Unten werden positive Zahlen, Null und negative Zahlen unterschieden.

0 is Zero!

import random


class CondNestedState(rx.State):
    num: int = 0

    @rx.event
    def change(self):
        self.num = random.randint(-10, 10)


rx.vstack(
    rx.button("Random number", on_click=CondNestedState.change),
    rx.cond(
        CondNestedState.num > 0,
        rx.text(f"{CondNestedState.num} is Positive!", color="orange"),
        rx.cond(
            CondNestedState.num == 0,
            rx.text(f"{CondNestedState.num} is Zero!", color="blue"),
            rx.text(f"{CondNestedState.num} is Negative!", color="red"),
        ),
    ),
)

Ein etwas komplexeres Beispiel: Python-Code, der die größte von drei Zahlen findet und meldet, wenn Zahlen gleich sind.

a = 8
b = 10
c = 2

if (a > b and a > c) and (a != b and a != c):
    print(a, " is the largest!")
elif (b > a and b > c) and (b != a and b != c):
    print(b, " is the largest!")
elif (c > a and c > b) and (c != a and c != b):
    print(c, " is the largest!")
else:
    print("Some of the numbers are equal!")

Dieselbe Logik als dreifach verschachteltes rx.cond sieht so aus. „Am größten“ heißt größer als die beiden anderen, ein eigener Test auf Verschiedenheit ist also unnötig. Klick auf Mischen und prüf auch den Fall mit gleichen Zahlen. Gibt es noch mehr Zweige, ist Match leichter zu lesen.

a=8 b=10 c=2

10 is the largest!

import random


class CondLargestState(rx.State):
    a: int = 8
    b: int = 10
    c: int = 2

    @rx.event
    def shuffle(self):
        self.a, self.b, self.c = (random.randint(1, 4) for _ in range(3))


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=CondLargestState.shuffle),
        rx.code(f"a={CondLargestState.a} b={CondLargestState.b} c={CondLargestState.c}"),
        align="center",
    ),
    rx.cond(
        (CondLargestState.a > CondLargestState.b) & (CondLargestState.a > CondLargestState.c),
        rx.text(f"{CondLargestState.a} is the largest!"),
        rx.cond(
            (CondLargestState.b > CondLargestState.a) & (CondLargestState.b > CondLargestState.c),
            rx.text(f"{CondLargestState.b} is the largest!"),
            rx.cond(
                (CondLargestState.c > CondLargestState.a) & (CondLargestState.c > CondLargestState.b),
                rx.text(f"{CondLargestState.c} is the largest!"),
                rx.text("Some of the numbers are equal!"),
            ),
        ),
    ),
)

Auftrag erledigt

Ein einziger Login-Status tauscht den ganzen rechten Bereich aus. Ist er wahr, erscheint eine Gruppe aus Avatar, Name und Logout-Button, sonst nur ein Login-Button.

Shop

class CondLoginState(rx.State):
    logged_in: bool = False
    user: str = "Ada"

    @rx.event
    def log_in(self):
        self.logged_in = True

    @rx.event
    def log_out(self):
        self.logged_in = False


rx.hstack(
    rx.text("Shop", weight="bold"),
    rx.spacer(),
    rx.cond(
        CondLoginState.logged_in,
        rx.hstack(
            rx.avatar(fallback=CondLoginState.user[0], size="2", radius="full"),
            rx.text(CondLoginState.user, size="2"),
            rx.button("Log out", on_click=CondLoginState.log_out, size="1", variant="soft", color_scheme="gray"),
            align="center",
        ),
        rx.button("Log in", on_click=CondLoginState.log_in, size="2"),
    ),
    width="100%",
    max_width="420px",
    align="center",
    padding="10px 14px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="10px",
)

Werkstattnotizen

rx.cond(Bedingung, wenn wahr, wenn falsch). Pythons if funktioniert nicht mit State-Werten.
Die Komponente für falsch ist optional. Mit zwei Werten entsteht eine Var für Props.
Verneinung mit ~, und · oder mit & · |. Vergleiche immer einklammern.
elif durch verschachteltes rx.cond. Bei vielen Zweigen rx.match.

← Zurück

Overlays · Toast

Weiter →

Dynamisches Rendern · Match

Ü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