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

Spacer

rx.spacer

Offizielle Doku

Werkstattauftrag

Bitte in der Kopfzeile links das Logo und ganz rechts den Anmelde-Button platzieren.

rx.spacer ist ein leeres Feld, das in einem Flex den gesamten freien Platz einnimmt. Zwischen Kinder gesetzt, schiebt es seine Nachbarn auseinander. So bringst du manche Elemente nach links und andere ganz nach rechts. Gibt es mehrere Spacer, teilen sie sich den freien Platz zu gleichen Teilen.

Example

rx.flex(
    rx.center(rx.text("Example"), bg="lightblue", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="lightgreen", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="salmon", padding="4px 8px"),
    width="100%",
)

Den Spacer verschieben

Ein Spacer hat kein eigenes Aussehen. Statt eines Prop-Labors sehen wir uns deshalb an, wie sich das Ergebnis je nach seiner Position ändert. Wähle unten, wo der Spacer stehen soll. Steht wie bei start + end an jedem Ende einer, rücken die Kinder in die Mitte.

class SpacerPlaceState(rx.State):
    place: str = "middle"

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


rx.vstack(
    rx.select(
        ["none", "start", "middle", "end", "start + end"],
        value=SpacerPlaceState.place,
        on_change=SpacerPlaceState.set_place,
    ),
    rx.flex(
        rx.cond((SpacerPlaceState.place == "start") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        rx.badge("A", size="3"),
        rx.cond(SpacerPlaceState.place == "middle", rx.spacer()),
        rx.badge("B", size="3"),
        rx.cond((SpacerPlaceState.place == "end") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        spacing="2",
        width="100%",
        padding="8px",
        border="1px dashed var(--gray-7)",
    ),
    width="100%",
)

Prop	Werte	Standard	Verwendung
(Stil) `flex`	`1`	von Reflex gesetzt	Nimmt den freien Platz ein. Mehrere teilen ihn gleichmäßig
(Stil) `align_self` `justify_self`	`"stretch"`	von Reflex gesetzt	Dehnt sich auch auf der Querachse
`direction` `align` `justify` `wrap` `spacing` `as_child`	wie bei Flex	keiner	Wegen der Flex-Basis vorhanden, bei einem leeren Feld aber kaum gebraucht

Ein Spacer nimmt nur dann Platz ein, wenn das Elternelement zur Flex-Familie gehört (rx.flex, rx.hstack, rx.vstack, rx.stack). In einer rx.box bewirkt er nichts.

In Stacks und in vertikaler Richtung

stack, vstack und hstack bauen alle auf Flex auf, daher funktioniert Spacer dort genauso. In vertikaler Richtung (vstack) teilt er die Höhe auf. Im Menü links rutscht „Log out“ dank des Spacers ganz nach unten. In vertikaler Richtung entsteht freier Platz nur, wenn das Elternelement eine Höhe hat.

Home

Orders

Log out

Left

Right

rx.flex(
    rx.vstack(
        rx.text("Menu", weight="bold"),
        rx.text("Home"),
        rx.text("Orders"),
        rx.spacer(),
        rx.text("Log out", color="var(--red-11)"),
        height="14rem",
        padding="12px",
        background_color="var(--gray-3)",
        width="140px",
    ),
    rx.hstack(
        rx.badge("Left"),
        rx.spacer(),
        rx.badge("Right"),
        width="100%",
        padding="12px",
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

Im Vergleich zu justify="between"

Kinder an beide Enden zu verteilen geht auch mit justify="between". Allerdings verteilt between den Platz gleichmäßig zwischen allen Kindern, während ein Spacer nur an seiner Stelle Platz schafft. Oben steht nur A links, B und C sitzen rechts; unten verteilt between alle drei gleichmäßig.

ABC

rx.vstack(
    rx.flex(rx.badge("A"), rx.spacer(), rx.badge("B"), rx.badge("C"), spacing="2", width="100%"),
    rx.flex(rx.badge("A"), rx.badge("B"), rx.badge("C"), justify="between", width="100%"),
    width="100%",
    spacing="4",
)

Auftrag erledigt

Ein Spacer zwischen der Logo-Gruppe und den beiden Buttons genügt: Das Logo bleibt links, die Buttons sitzen ganz rechts.

Workshop

rx.hstack(
    rx.hstack(rx.icon("hammer"), rx.text("Workshop", weight="bold"), align="center"),
    rx.spacer(),
    rx.button("Log in", variant="soft"),
    rx.button("Sign up"),
    align="center",
    width="100%",
    padding="12px 16px",
    border_bottom="1px solid var(--gray-6)",
)

Werkstattnotizen

rx.spacer() ist ein leeres Feld, das den freien Platz in einem Flex einnimmt.
Es schiebt die Nachbarn an seiner Stelle auseinander. Mehrere teilen sich den Platz gleichmäßig.
Funktioniert nur in flex · hstack · vstack · stack. Im vstack braucht das Elternelement eine Höhe.
Alle Kinder gleichmäßig verteilen: justify="between". Nur an einer Stelle Platz schaffen: spacer.

← Zurück

Layout · Center

Weiter →

Layout · Separator

Ü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