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

Layout

Fragment

rx.fragment

Offizielle Doku

Werkstattauftrag

Die Karten müssen direkt in die Grid-Zellen, aber je nach Bedingung sollen zwei Karten auf einmal ein- oder ausgeblendet werden.

rx.fragment fasst mehrere Komponenten zu einer zusammen, hinterlässt aber kein umschließendes Element in der Anzeige. Es entspricht Reacts Fragment. Du brauchst es, wenn an einer Stelle, an der syntaktisch nur eine Komponente stehen darf (ein Zweig von rx.cond, der Rückgabewert von rx.foreach, der Rückgabewert einer Funktion), mehrere stehen sollen. Da kein umschließendes div entsteht, bleibt der Aufbau des äußeren Flex oder Grid intakt.

Component1

Component2

rx.fragment(rx.text("Component1"), rx.text("Component2"))

Mit State bewegen

Fragment hat keine sichtbaren Props, deshalb bewegen wir es statt mit einem Prop-Labor mit State. In einen Zweig von rx.cond passt nur eine Komponente, also werden zwei Karten mit Fragment gebündelt und gemeinsam ein- und ausgeblendet. Beide Karten landen direkt in den Zellen des Grid.

Show cards 4 and 5

Card 1

Card 2

Card 3

class FragmentExtraState(rx.State):
    show_extra: bool = False

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


rx.vstack(
    rx.hstack(
        rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
        rx.text("Show cards 4 and 5"),
        align="center",
    ),
    rx.grid(
        rx.card("Card 1"),
        rx.card("Card 2"),
        rx.card("Card 3"),
        rx.cond(
            FragmentExtraState.show_extra,
            rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
        ),
        columns="3",
        spacing="2",
        width="100%",
    ),
    width="100%",
)

Prop	Werte	Standard	Verwendung
`*children`	mehrere Komponenten	keiner	Die zu bündelnden Kinder. Sie werden ohne umschließendes Element gerendert

Weil von einem Fragment kein Element in der Anzeige übrig bleibt, gibt es keinen Ort für Stile (width, padding …) oder Events wie on_click. Übergibst du sie trotzdem, wirken sie nicht, und React gibt eine Warnung aus. Brauchst du Stile, umschließt du mit rx.box.

Im Vergleich zum Umschließen mit Box

Beide Grids bündeln die Karten 2 und 3. Links ist es ein Fragment, deshalb belegen 2 und 3 je eine eigene Zelle. Rechts ist es eine Box, deshalb stapeln sich 2 und 3 in einer Zelle, und auch die 4 landet woanders.

rx.flex(
    rx.grid(
        rx.card("1"),
        rx.fragment(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("1"),
        rx.box(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    justify="between",
    align="start",
    width="100%",
)

Mehrere Komponenten aus foreach und Funktionen zurückgeben

Die Funktion in rx.foreach muss pro Eintrag genau eine Komponente zurückgeben. Willst du zwei Zellen zurückgeben, etwa Name und Preis, bündelst du sie mit Fragment. Das äußere Grid mit columns="2" setzt dann den Namen in die linke und den Preis in die rechte Zelle, und alles steht wie in einer Tabelle.

Coffee

Tea

Cake

class FragmentMenuState(rx.State):
    items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]


def fragment_menu_row(row):
    return rx.fragment(
        rx.text(row[0]),
        rx.text(row[1], text_align="right", weight="bold"),
    )


rx.grid(
    rx.foreach(FragmentMenuState.items, fragment_menu_row),
    columns="2",
    spacing_y="2",
    width="200px",
)

Auftrag erledigt

Mitglieder sehen zwei zusätzliche Karten, alle anderen eine Hinweiskarte, die sich über zwei Zellen erstreckt. Weil der erste Zweig von rx.cond ein Fragment ist, landen die beiden Karten direkt in den Zellen des Grid.

Mug

Plate

Gold mug

Gold plate

class FragmentOrderState(rx.State):
    members_only: bool = True

    @rx.event
    def toggle_members(self):
        self.members_only = not self.members_only


rx.vstack(
    rx.button(
        rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
        on_click=FragmentOrderState.toggle_members,
        variant="soft",
    ),
    rx.grid(
        rx.card("Mug"),
        rx.card("Plate"),
        rx.cond(
            FragmentOrderState.members_only,
            rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
            rx.card("Members get two more items", grid_column="span 2"),
        ),
        columns="2",
        spacing="2",
        width="100%",
        max_width="320px",
    ),
)

Werkstattnotizen

rx.fragment(a, b) bündelt mehrere Komponenten zu einer, ohne umschließendes Element.
Dafür gedacht, mehrere Komponenten in einen Zweig von rx.cond, den Rückgabewert von rx.foreach oder einer Funktion zu packen.
Ohne umschließendes div bleibt die Zellenanordnung des äußeren Flex oder Grid erhalten.
Da kein Element übrig bleibt, sind Stile und Events nicht möglich. Bei Bedarf rx.box.

← Zurück

Layout · Aspect Ratio

Weiter →

Typografie · Text

Ü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