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

Auf- und Zuklappen

Segmented Control

rx.segmented_control.rootrx.segmented_control.item

Offizielle Doku

Werkstattauftrag

Setz über die Produktliste einen Umschalter „Raster / Liste“ und zeig die Produkte in der gewählten Ansicht.

Ein Segmented Control ist eine Gruppe von Buttons, mit der man einen von wenigen festen Werten oder Ansichten auswählt. Es macht Auswahlen, bei denen nur eine aktiv sein kann, wie „Inbox / Drafts / Sent“ deutlich sichtbar. Ein Dropdown zeigt nur den gewählten Wert, und bei mehreren einzelnen Buttons erkennt man schlecht, welcher aktiv ist – das Segmented Control zeigt dagegen alle Optionen und die aktuelle Auswahl zugleich.

rx.segmented_control.root umfasst die Einträge vom Typ rx.segmented_control.item, und jedes item hat einen sichtbaren Text und ein eindeutiges value.

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
)

Props ausprobieren

size

variant

color

radius

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
    size="2",
    variant="surface",
    color_scheme="indigo",
    radius="medium",
)

size legt die Größe fest, variant die Hintergrundform, color_scheme die Farbe des gewählten Felds und radius die Ecken.

Teil	Prop	Werte	Verwendung
`root`	`default_value`	value eines items	Anfangs gewählter Wert (unkontrolliert)
`root`	`value` + `on_change`	State-Wert, Event	Gewählten Wert über den State steuern (kontrolliert)
`root`	`type`	`"single"` (Standard) `"multiple"`	Einen oder mehrere auswählen
`root`	`size`	`"1"` `"2"` (Standard) `"3"`	Größe
`root`	`variant`	`"surface"` (Standard) `"classic"`	Form des Hintergrunds
`root`	`color_scheme` · `radius`	Radix-Farbname, Eckenwert	Farbe und Ecken
`item`	`value`	String (eindeutig)	Wert dieses Felds

Mit dem State verbinden

Wie im Grundbeispiel der offiziellen Doku verbindest du value mit einem State-Wert und on_change mit einem Event, das diesen Wert ändert. Wählst du ein Feld, übergibt on_change das value des gewählten items; ändert sich der State, ziehen andere Stellen der Oberfläche mit. Hier ändert der gewählte Wert die Textausrichtung.

Da on_change je nach type einen String oder eine Liste von Strings übergibt, musst du den Parametertyp des Handlers als str | list[str] angeben. Schreibst du nur str, meldet Reflex einen Typfehler.

Aligned left

class SegmentedAlignState(rx.State):
    control: str = "left"

    @rx.event
    def set_segmented_align(self, value: str | list[str]):
        if isinstance(value, str):
            self.control = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item("Left", value="left"),
        rx.segmented_control.item("Center", value="center"),
        rx.segmented_control.item("Right", value="right"),
        value=SegmentedAlignState.control,
        on_change=SegmentedAlignState.set_segmented_align,
    ),
    rx.card(
        rx.text("Aligned " + SegmentedAlignState.control, align=SegmentedAlignState.control),
        width="100%",
    ),
    width="100%",
)

Mehrere auswählen

Mit type="multiple" lassen sich mehrere Felder zugleich aktivieren, und der Wert wird zu einer Liste. In ein item kannst du statt Text auch ein Icon setzen. Unten siehst du Buttons für Fett, Kursiv und Unterstrichen. Reflex 0.10 prüft beim Erzeugen der Komponente direkt, ob type gleich "multiple" ist; gib type deshalb als festen Wert an, nicht als State-Wert. Aus diesem Grund fehlt es auch auf der Werkbank.

Sample text

value = bold

class SegmentedStyleState(rx.State):
    styles: list[str] = ["bold"]

    @rx.event
    def set_segmented_styles(self, value: str | list[str]):
        self.styles = [value] if isinstance(value, str) else list(value)


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("bold", size=16), value="bold"),
        rx.segmented_control.item(rx.icon("italic", size=16), value="italic"),
        rx.segmented_control.item(rx.icon("underline", size=16), value="underline"),
        type="multiple",
        value=SegmentedStyleState.styles,
        on_change=SegmentedStyleState.set_segmented_styles,
    ),
    rx.text(
        "Sample text",
        weight=rx.cond(SegmentedStyleState.styles.contains("bold"), "bold", "regular"),
        font_style=rx.cond(SegmentedStyleState.styles.contains("italic"), "italic", "normal"),
        text_decoration=rx.cond(SegmentedStyleState.styles.contains("underline"), "underline", "none"),
    ),
    rx.text("value = ", SegmentedStyleState.styles.join(", "), size="1", color_scheme="gray"),
)

Auftrag erledigt

Je nach gewähltem Wert schaltet rx.cond zwischen Raster und Liste um. In die items kommen jeweils Icon und Text.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

class SegmentedViewState(rx.State):
    view: str = "grid"

    @rx.event
    def set_segmented_view(self, value: str | list[str]):
        if isinstance(value, str):
            self.view = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("layout-grid", size=14), "Grid", value="grid"),
        rx.segmented_control.item(rx.icon("list", size=14), "List", value="list"),
        value=SegmentedViewState.view,
        on_change=SegmentedViewState.set_segmented_view,
        size="1",
    ),
    rx.cond(
        SegmentedViewState.view == "grid",
        rx.grid(*[rx.card(rx.text("Item ", i), height="60px") for i in range(1, 7)], columns="3", spacing="2", width="100%"),
        rx.vstack(*[rx.card(rx.text("Item ", i), width="100%") for i in range(1, 7)], spacing="2", width="100%"),
    ),
    width="100%",
    max_width="420px",
)

Werkstattnotizen

In segmented_control.root kommen segmented_control.item("Text", value=…).
default_value für unkontrolliert, value + on_change zur Steuerung über den State (kontrolliert).
Der Parametertyp des on_change-Handlers ist str | list[str].
Mit type="multiple" lassen sich mehrere Felder aktivieren, und der Wert wird zur Liste.
Das Aussehen bestimmen size · variant (surface · classic) · color_scheme · radius.

← Zurück

Auf- und Zuklappen · Accordion

Weiter →

Overlays · Tooltip

Ü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