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

Tabs

rx.tabs.rootrx.tabs.listrx.tabs.triggerrx.tabs.content

Offizielle Doku

Werkstattauftrag

Teile auf der Produktseite „Beschreibung“, „Technische Daten“ und „Bewertungen“ in Tabs auf, sodass immer nur einer zu sehen ist.

Tabs legen zusammengehörige Inhaltsgruppen gleicher Ebene übereinander und zeigen immer nur eine davon. Sie bestehen aus vier Teilen.

rx.tabs.root: umfasst das Ganze und merkt sich, welcher Tab offen ist.
rx.tabs.list: die Leiste, in der die Tab-Buttons stehen.
rx.tabs.trigger: ein Button, der beim Klick seinen Tab öffnet. value ist sein Namensschild.
rx.tabs.content: der Inhalt eines Tabs. Er erscheint, wenn der Trigger mit demselben value gedrückt wird.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab1",
)

Props ausprobieren

orientation und activation_mode gehören an root, size und loop an list, color_scheme und disabled an trigger. Klick auf einen Tab und wechsle dann mit den Pfeiltasten.

Props ausprobieren

Make changes to your account

orientation

activation_mode

size

loop

color

disable_settings

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Account", value="account", color_scheme="indigo"),
        rx.tabs.trigger("Documents", value="documents", color_scheme="indigo"),
        rx.tabs.trigger("Settings", value="settings", color_scheme="indigo", disabled=False),
        size="2",
        loop=True,
    ),
    rx.box(
        rx.tabs.content(rx.text("Make changes to your account"), value="account"),
        rx.tabs.content(rx.text("Update your documents"), value="documents"),
        rx.tabs.content(rx.text("Edit your personal profile"), value="settings"),
        padding="12px",
    ),
    default_value="account",
    orientation="horizontal",
    activation_mode="automatic",
)

Bei activation_mode manual verschieben die Pfeiltasten nur den Fokus; geöffnet wird der Tab erst mit Enter oder Leertaste. Schaltest du loop aus, halten die Pfeiltasten am Ende an.

Teil	Prop	Werte	Verwendung
`root`	`default_value`	value eines Triggers	Tab, der anfangs offen ist (unkontrolliert)
`root`	`value` + `on_change`	State-Wert, Event	Offenen Tab über den State steuern (kontrolliert)
`root`	`orientation`	`"horizontal"` (Standard) `"vertical"`	Richtung der Tab-Leiste und der Pfeiltasten
`root`	`activation_mode`	`"automatic"` (Standard) `"manual"`	Öffnen schon beim Fokussieren oder erst beim Drücken
`list`	`size`	`"1"` `"2"` (Standard)	Größe der Tab-Buttons
`list`	`loop`	`True` (Standard) / `False`	Ob die Pfeiltasten am Ende zum Anfang zurückspringen
`trigger`	`value`	String (eindeutig)	Namensschild dieses Tabs
`trigger`	`disabled`	`True` / `False`	Nicht anklickbar machen
`trigger`	`color_scheme`	Radix-Farbname	Farbe der Unterstreichung, wenn offen
`content`	`value`	derselbe String wie beim Trigger	Zu welchem Tab der Inhalt gehört
`content`	`force_mount`	`True` / `False`	Auch geschlossen nicht aus dem DOM entfernen

Der anfangs geöffnete Tab

Gibst du default_value das value eines Triggers, ist dieser Tab von Anfang an offen. Ohne Angabe startet die Ansicht ohne geöffneten Tab, deshalb setzt man es in der Regel immer.

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab2",
)

Vertikale Tabs

Mit orientation="vertical" steht die Tab-Leiste senkrecht links. Es ändert sich nicht nur die sichtbare Richtung, sondern auch die der Tastatur: Du wechselst die Tabs mit den Pfeiltasten hoch und runter (waagerecht mit links und rechts). Im vertikalen Fall muss es zu jedem Trigger ein content geben. Fehlt eines, gerät die Breite der Tab-Leiste ins Wackeln.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1", padding_left="16px"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2", padding_left="16px"),
    default_value="tab1",
    orientation="vertical",
)

Den offenen Tab über den State steuern (kontrolliert)

Gibst du value einen State-Wert und änderst ihn in on_change, kennt der Server den offenen Tab. So kannst du per Button einen anderen Tab öffnen oder beim Tabwechsel etwas anderes erledigen. on_change übergibt das value des neu geöffneten Tabs.

tab1 selected (changed 0 times)

items on tab 1

class TabsPickState(rx.State):
    value: str = "tab1"
    changes: int = 0

    @rx.event
    def go_tab2(self):
        self.value = "tab2"

    @rx.event
    def change_tab(self, val: str):
        self.value = val
        self.changes += 1


rx.vstack(
    rx.text(TabsPickState.value, " selected (changed ", TabsPickState.changes, " times)"),
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Tab 1", value="tab1"),
            rx.tabs.trigger("Tab 2", value="tab2"),
        ),
        rx.tabs.content(rx.text("items on tab 1"), value="tab1"),
        rx.tabs.content(rx.text("items on tab 2"), value="tab2"),
        value=TabsPickState.value,
        on_change=TabsPickState.change_tab,
        width="100%",
    ),
    rx.button("Jump to Tab 2", on_click=TabsPickState.go_tab2, size="1", variant="soft"),
)

Tab-Buttons (trigger)

Das value eines Triggers muss je Tab verschieden sein und bildet mit dem content gleichen Werts ein Paar. disabled=True sperrt ihn gegen Klicks, und color_scheme ändert die Farbe der Unterstreichung, die beim Öffnen darunter erscheint. In einen Trigger passen auch Komponenten wie Icons.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2", color_scheme="green"),
        rx.tabs.trigger("Tab 3", value="tab3", disabled=True),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    rx.tabs.content(rx.text("item on tab 3"), value="tab3"),
    default_value="tab1",
)

Tab-Inhalt (content) und force_mount

Das content eines geschlossenen Tabs wird aus dem DOM entfernt. Was nur im Browser existierte, etwa Text in einem Eingabefeld, verschwindet daher beim Tabwechsel. Mit force_mount=True bleibt der Inhalt auch geschlossen erhalten. Dann ist allerdings auch der geschlossene Tab sichtbar, also gibst du zusätzlich einen Stil mit, der ihn bei data-state='inactive' ausblendet. Das nutzt man auch, wenn eine Animationsbibliothek das Öffnen und Schließen selbst steuern soll.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Write", value="write"),
        rx.tabs.trigger("Preview", value="preview"),
    ),
    rx.tabs.content(
        rx.el.input(placeholder="Type, then switch tabs", default_value="", padding="6px", margin_top="8px"),
        value="write",
        force_mount=True,
        style={"&[data-state='inactive']": {"display": "none"}},
    ),
    rx.tabs.content(rx.text("The input on the other tab keeps its text.", margin_top="8px"), value="preview"),
    default_value="write",
)

Auftrag erledigt

Die Tab-Buttons bekommen Icons, und in die Inhalte kommen Text, eine Datenliste und ein Badge.

A light, waterproof jacket for everyday rain.

rx.card(
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger(rx.icon("file-text", size=14), "Description", value="desc"),
            rx.tabs.trigger(rx.icon("ruler", size=14), "Specs", value="specs"),
            rx.tabs.trigger(rx.icon("star", size=14), "Reviews", value="reviews"),
        ),
        rx.tabs.content(
            rx.text("A light, waterproof jacket for everyday rain.", size="2"),
            value="desc",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.data_list.root(
                rx.data_list.item(rx.data_list.label("Weight"), rx.data_list.value("320 g")),
                rx.data_list.item(rx.data_list.label("Material"), rx.data_list.value("Nylon")),
            ),
            value="specs",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.hstack(rx.badge("4.8", color_scheme="amber"), rx.text("from 214 reviews", size="2")),
            value="reviews",
            padding_top="12px",
        ),
        default_value="desc",
    ),
    max_width="420px",
)

Werkstattnotizen

tabs.root > tabs.list > tabs.trigger(value=…) und tabs.content(value=…) werden über value gepaart.
default_value für den anfangs offenen Tab (unkontrolliert), value + on_change zur Steuerung über den State (kontrolliert).
orientation ändert sichtbare Richtung und Pfeiltastenrichtung zugleich. Vertikal braucht jeder Trigger ein content.
list: size · loop, trigger: disabled · color_scheme, content: force_mount.

← Zurück

Datenanzeige · Moment

Weiter →

Auf- und Zuklappen · Accordion

Ü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