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

Formulare

Switch

rx.switch

Offizielle Doku

Werkstattauftrag

Bitte setz in die App-Einstellungen drei Schalter, mit denen man Benachrichtigungen ein- und ausschaltet. Darunter soll zusammengefasst stehen, was gerade eingeschaltet ist.

rx.switch nimmt denselben Ja/Nein-Wert wie eine Checkbox entgegen, nur in Schalterform. Er passt dorthin, wo sich beim Umlegen sofort etwas ändert, etwa bei „sofort wirksamen Einstellungen“. Für Werte, die beim Absenden gesammelt verschickt werden, wie Zustimmungen oder Listenauswahl, ist Checkbox die natürlichere Wahl.

rx.switch(default_checked=True)

Props ausprobieren

size

variant

color

radius

high_contrast

disabled

rx.switch(default_checked=True, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)

radius nimmt nur none · small · full. Auch mit disabled lässt sich der Schalter über checked umlegen (siehe unten „Wert steuern“).

Prop	Werte	Standard	Verwendung
`checked`	`True` / `False` / Var	keiner	Gesteuerter Wert (zusammen mit `on_change`)
`default_checked`	`True` / `False`	`False`	Wert, der nur einmal am Anfang gesetzt wird
`size`	`"1"` bis `"3"`	`"2"`	Größe
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aussehen
`color_scheme`, `high_contrast`	Radix-Farbname / `True`	Theme-Wert	Farbe im eingeschalteten Zustand und Kontrast
`radius`	`"none"` `"small"` `"full"`	Theme-Wert	Ecken
`disabled`	`True` / `False`	`False`	Für Nutzer nicht bedienbar
`name`, `value`, `required`	String / `True`	keiner / `"on"`	Name und Wert beim Absenden; muss eingeschaltet sein, um abzusenden
`on_change`	Event		Beim Ein- und Ausschalten. Übergibt `True`/`False`

Wert per on_change empfangen

Bei jedem Umlegen übergibt on_change den neuen Wert. Schreibst du ihn in den State, kannst du ihn an anderer Stelle der Seite verwenden.

false

class SwitchBasicState(rx.State):
    value: bool = False

    @rx.event
    def set_value(self, value: bool):
        self.value = value


rx.hstack(
    rx.switch(on_change=SwitchBasicState.set_value),
    rx.badge(SwitchBasicState.value.to_string()),
    align="center",
)

Wert steuern: checked

Gibst du checked einen State-Wert, folgt der Schalter diesem Wert. Beide Schalter sehen denselben Wert, also bewegen sich beide, wenn du einen umlegst. Der zweite ist disabled=True und lässt sich nicht direkt anklicken, bewegt sich aber mit, sobald sich checked ändert. Dasselbe gilt, wenn der Server den Wert ändert, etwa über einen Button.

class SwitchControlState(rx.State):
    checked: bool = True

    @rx.event
    def change_checked(self, checked: bool):
        self.checked = checked

    @rx.event
    def flip(self):
        self.checked = not self.checked


rx.hstack(
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked),
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked, disabled=True),
    rx.button("Flip from server", on_click=SwitchControlState.flip, size="1", variant="soft"),
    align="center",
    spacing="4",
)

Label anfügen

Anders als Checkbox hat rx.switch kein Label-Argument. Umschließt du Schalter und Text mit rx.text(..., as_="label"), bewegt auch ein Klick auf den Text den Schalter.

Wi-Fi

rx.text(
    rx.flex(rx.switch(default_checked=True), "Wi-Fi", spacing="2", align="center"),
    as_="label",
    size="2",
)

Im Formular

Mit name landet der Schalter in den Formulardaten. Nur eingeschaltete Schalter kommen als "on" (oder mit dem per value gesetzten Wert) an, ausgeschaltete fehlen. value ist nur der zu sendende Wert, ob der Schalter an ist, bestimmt checked. Ein Schalter mit required=True muss eingeschaltet sein, damit das Formular abgeschickt wird.

Results:

{}

class SwitchFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.text(rx.flex(rx.switch(name="email_alerts", value="yes"), "Email alerts", spacing="2"), as_="label", size="2"),
                rx.text(rx.flex(rx.switch(name="age_check", required=True), "I am over 14 (required)", spacing="2"), as_="label", size="2"),
                rx.button("Submit", type="submit"),
            ),
            on_submit=SwitchFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SwitchFormState.form_data.to_string())),
    ),
)

Auftrag erledigt

Die Liste der Einstellungsnamen ist eine Konstante, deshalb entstehen die Zeilen per Python-List-Comprehension statt mit rx.foreach. Jeder Schalter liest settings[name], und on_change übergibt Namen und neuen Wert gemeinsam. n=name im Lambda ist ein Default-Argument, das den Namen in jedem Durchlauf festhält.

Order updates

Delivery alerts

Coupons

On: Order updates, Delivery alerts

SWITCH_SETTING_NAMES = ["Order updates", "Delivery alerts", "Coupons"]


class SwitchSettingsState(rx.State):
    settings: dict[str, bool] = {"Order updates": True, "Delivery alerts": True, "Coupons": False}

    @rx.event
    def toggle(self, name: str, value: bool):
        self.settings = {**self.settings, name: value}

    @rx.var
    def summary(self) -> str:
        on = [k for k in SWITCH_SETTING_NAMES if self.settings.get(k)]
        return ", ".join(on) if on else "Nothing"


rx.card(
    rx.vstack(
        *[
            rx.hstack(
                rx.text(name, size="2"),
                rx.spacer(),
                rx.switch(
                    checked=SwitchSettingsState.settings[name],
                    on_change=lambda v, n=name: SwitchSettingsState.toggle(n, v),
                ),
                width="100%",
                align="center",
            )
            for name in SWITCH_SETTING_NAMES
        ],
        rx.divider(),
        rx.text("On: ", SwitchSettingsState.summary, size="1", color_scheme="gray"),
        width="260px",
    ),
)

Werkstattnotizen

rx.switch für sofort wirksame Einstellungen, Checkbox für Werte, die beim Absenden gesammelt werden.
on_change übergibt True/False. Gesteuert mit checked + on_change.
disabled sperrt nur die Nutzer. Ändert sich checked, bewegt sich der Schalter trotzdem.
Ein Label fügst du an, indem du mit rx.text(..., as_="label") umschließt.
Im Formular kommen nur eingeschaltete Schalter als name: "on" (oder value) an.

← Zurück

Formulare · Checkbox

Weiter →

Formulare · Radio Group

Ü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