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

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

Offizielle Doku

Werkstattauftrag

Klapp die „Häufig gestellten Fragen“ des Kundenservice so zu, dass nur die Fragen zu sehen sind und sich die Antwort beim Klick aufklappt.

Ein Akkordeon stapelt Überschriften untereinander; klickt man eine an, klappt der Inhalt darunter auf. Man nutzt es, um Inhalte einzuklappen, die vollständig geöffnet zu lang wären, etwa häufige Fragen oder Gruppen von Einstellungen. In rx.accordion.root legst du Einträge vom Typ rx.accordion.item und gibst jedem ein header (Überschrift) und ein content (Inhalt).

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    width="300px",
)

Props ausprobieren

Alle diese Props gehören an root. Stellst du type auf multiple, lassen sich mehrere Einträge gleichzeitig aufklappen.

Props ausprobieren

type

collapsible

variant

color

radius

show_dividers

disabled

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

Schaltest du collapsible aus, schließt sich ein offener Eintrag bei erneutem Klick nicht mehr. variant und color_scheme bestimmen Hintergrundform und Farbe.

Teil	Prop	Werte	Verwendung
`root`	`type`	`"single"` (Standard) `"multiple"`	Nur einen oder mehrere gleichzeitig aufklappen
`root`	`collapsible`	`True` / `False`	Offenen Eintrag durch erneuten Klick schließen können
`root`	`default_value`	value eines items (bei multiple eine Liste)	Anfangs aufgeklappter Eintrag
`root`	`value` + `on_value_change`	State-Wert, Event	Aufgeklappte Einträge über den State steuern
`root`	`disabled`	`True` / `False`	Alle Einträge unanklickbar machen
`root`	`orientation`	`"vertical"` (Standard) `"horizontal"`	Richtung der Pfeiltasten
`root`	`variant`	`"classic"` (Standard) `"soft"` `"surface"` `"outline"` `"ghost"`	Form des Hintergrunds
`root`	`color_scheme` · `radius`	Radix-Farbname, Eckenwert	Farbe und Ecken
`root`	`show_dividers`	`True` / `False`	Trennlinien zwischen den Einträgen
`root`	`duration` · `easing`	Millisekunden (Standard 250), CSS-Easing	Animation beim Auf- und Zuklappen
`item`	`header` · `content`	Text oder Komponente	Überschrift und Inhalt
`item`	`value`	String	Namensschild dieses Eintrags; ohne Angabe ein Zufallswert
`item`	`disabled`	`True` / `False`	Nur diesen Eintrag unanklickbar machen

Mehrere aufklappen

Der Standardwert von type, "single", klappt immer nur einen Eintrag auf; öffnest du einen anderen, schließt sich der vorige. Mit "multiple" können mehrere Einträge gleichzeitig offen sein.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="multiple",
    collapsible=True,
    width="300px",
)

Der anfangs aufgeklappte Eintrag

Gibst du default_value das value eines items, ist dieser Eintrag von Anfang an aufgeklappt. Deshalb musst du den items ihr value selbst geben (sonst erzeugt Reflex einen Zufallswert). Bei type="multiple" übergibst du eine Liste wie ["item_1", "item_3"].

The second accordion item's content

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content", value="item_1"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content", value="item_2"),
    rx.accordion.item(header="Third item", content="The third accordion item's content", value="item_3"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

Wieder schließen und sperren

Mit collapsible=True lässt sich ein offener Eintrag durch erneuten Klick schließen. Bei False bleibt, sobald einmal einer geöffnet wurde, immer einer offen.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

disabled=True an root sperrt alle Einträge, an einem item nur diesen einen.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Ausrichtung

orientation ändert nicht das Aussehen, sondern nur das Verhalten der Tastatur. Beim Standard "vertical" wechselst du mit den Pfeiltasten hoch und runter zwischen den Überschriften, bei "horizontal" mit links und rechts. Klick unten eine Überschrift an und drück dann die Pfeiltasten.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

Form und Farbe

variant gibt es in fünf Ausführungen: classic füllt kräftig mit der Themenfarbe, soft blass, surface und outline zeichnen einen Rahmen, ghost kommt ganz ohne Hintergrund aus.

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_scheme legt die Farbe des Akkordeons unabhängig vom Theme fest.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Aufgeklappte Einträge über den State steuern

Gibst du value einen State-Wert und änderst ihn in on_value_change, weiß der Server, welcher Eintrag aufgeklappt ist. Du kannst dann auch per Button einen bestimmten Eintrag öffnen oder alle schließen. Sind alle zugeklappt, kommt ein leerer String an. In content passen nicht nur Texte, sondern auch Komponenten wie Buttons.

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

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

    @rx.event
    def open_accordion_item(self, value: str):
        self.value = value


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    rx.accordion.root(
        rx.accordion.item(header="Is it accessible?", content=rx.button("Test button"), value="item_1"),
        rx.accordion.item(header="Is it unstyled?", content="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

Aus Einzelteilen zusammenbauen

header= und content= sind Abkürzungen. Reflex 0.10 kennt auch die Teile, aus denen sie bestehen – rx.accordion.header, rx.accordion.trigger (die klickbare Fläche), rx.accordion.icon (der Aufklapp-Pfeil) und rx.accordion.content –, sodass du sie selbst als Kinder eines items zusammensetzen kannst. Das nutzt du für feinere Gestaltung, etwa ein Icon in der Überschrift. Auf der Seite der offiziellen Doku kommen diese Teile nicht vor.

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

Auftrag erledigt

Damit man mehrere Fragen zugleich aufklappen kann, steht es auf multiple; ghost und Trennlinien sorgen für ein leichtes Aussehen.

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

Werkstattnotizen

In accordion.root kommen accordion.item(header=…, content=…).
type: single (Standard) · multiple; mit collapsible=True schließt ein erneuter Klick.
Für default_value oder value gibst du den items selbst ein value. Gesteuert wird mit value + on_value_change.
orientation ändert nur die Tastaturrichtung. Fünf variants, color_scheme, show_dividers.
Feinere Gestaltung durch Zusammenbau aus header · trigger · icon · content (0.10).

← Zurück

Auf- und Zuklappen · Tabs

Weiter →

Auf- und Zuklappen · Segmented Control

Ü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