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

Center

rx.center

Offizielle Doku

Werkstattauftrag

Bitte auf der Seite für den leeren Warenkorb ein Icon und einen Hinweistext genau in die Mitte setzen.

rx.center ist ein Behälter, der seine Kinder horizontal und vertikal genau in seine Mitte setzt. Er baut auf rx.flex auf, nutzt alle Props von Flex und bringt die zentrierenden Stile (align_items und justify_content auf center) schon mit. Du verwendest ihn, wann immer etwas mittig stehen soll: Hinweise auf leeren Seiten, Icon-Badges oder Ladeanzeigen.

Hello World!

rx.center(
    rx.text("Hello World!"),
    border="4px solid var(--gray-7)",
    border_radius="15px",
    width="50%",
    padding="12px",
)

Props ausprobieren

Die Zentrierung wird sichtbar, sobald der Behälter größer ist als sein Inhalt. Egal wie du Breite und Höhe änderst, die Karten bleiben immer genau in der Mitte.

Props ausprobieren

Card 1

Card 2

Card 3

direction

spacing

width

height

rx.center(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    direction="row",
    spacing="3",
    width="100%",
    height="12rem",
    border="1px dashed var(--gray-7)",
    border_radius="8px",
)

Mit direction auf column werden die Karten untereinander gestapelt und trotzdem mittig gesetzt. spacing ist der Abstand zwischen den Karten.

Prop	Werte	Standard	Verwendung
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Richtung, in der mehrere Kinder angeordnet werden
`spacing`	`"0"` ~ `"9"`	keiner	Abstand zwischen den Kindern
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Bei Überlauf in die nächste Zeile
`width` `height`	CSS-Länge	passt sich dem Inhalt an	Größe des Bereichs, in dem zentriert wird
`as_child`	`True` / `False`	`False`	Als Kind-Element rendern und die Props zusammenführen

Die Flex-Props align und justify werden ebenfalls akzeptiert, aber Center hat beide schon auf die Mitte gesetzt, du brauchst sie also kaum.

Dasselbe mit rx.flex

Center ist die Kurzform von rx.flex(..., align="center", justify="center"). Beide Behälter liefern genau dasselbe Ergebnis.

rx.center

rx.flex + align + justify

rx.flex(
    rx.center(rx.text("rx.center"), width="45%", height="6rem", background_color="var(--gray-3)"),
    rx.flex(
        rx.text("rx.flex + align + justify"),
        align="center",
        justify="center",
        width="45%",
        height="6rem",
        background_color="var(--gray-3)",
    ),
    justify="between",
    width="100%",
)

Icon-Badges

Gibst du gleiche Breite und Höhe an und rundest die Ecken, entsteht ein rundes Badge für ein Icon oder eine Zahl. Den Inhalt setzt Center von selbst in die Mitte.

rx.flex(
    rx.center(rx.icon("check", color="var(--grass-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--grass-3)"),
    rx.center(rx.icon("x", color="var(--red-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--red-3)"),
    rx.center(rx.text("42", weight="bold"), width="48px", height="48px", border_radius="8px", background_color="var(--accent-3)"),
    spacing="3",
)

Auftrag erledigt

Mit direction="column" werden Icon, Überschrift, Hinweis und Button untereinander gestapelt und innerhalb einer großzügigen min_height genau mittig gesetzt. Um etwas in der Mitte der ganzen Seite zu platzieren, gib min_height="100vh" an.

Your cart is empty

Add something you like.

rx.center(
    rx.icon("shopping-cart", size=40, color="var(--gray-9)"),
    rx.heading("Your cart is empty", size="4"),
    rx.text("Add something you like.", size="2", color="var(--gray-11)"),
    rx.button("Go shopping", variant="soft"),
    direction="column",
    spacing="3",
    width="100%",
    min_height="16rem",
    border="1px dashed var(--gray-6)",
    border_radius="8px",
)

Werkstattnotizen

rx.center setzt die Kinder horizontal und vertikal genau in die Mitte.
Entspricht rx.flex(align="center", justify="center") und nutzt die Props von Flex unverändert.
Damit die Zentrierung sichtbar wird, muss der Behälter größer als der Inhalt sein: width · height · min_height.
Mehrere Kinder stapelst du mit direction und gibst ihnen mit spacing Abstand.

← Zurück

Layout · Section

Weiter →

Layout · Spacer

Ü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