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

Separator

rx.separatorrx.divider

Offizielle Doku

Werkstattauftrag

Bitte auf der Profilkarte eine dünne Trennlinie zwischen den Namensbereich und die Kontaktdaten setzen.

rx.separator zieht eine dünne Linie zwischen Inhalte und teilt sie so in Blöcke. Die Trennung ist sichtbar und kann bei Bedarf auch Screenreadern mitteilen: „Hier wird getrennt.“ rx.divider ist nur ein anderer Name für dieselbe Komponente, du kannst also beide verwenden.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.separator(),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
    align="center",
)

Props ausprobieren

Für eine senkrechte Linie stellst du orientation auf vertical und das äußere direction auf row. Die Länge einer senkrechten Linie richtet sich nach der Höhe des Elternelements (hier 10rem).

Props ausprobieren

Section 1

Section 2

size

orientation

direction

color

rx.flex(
    rx.card("Section 1"),
    rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
    rx.card("Section 2"),
    direction="column",
    spacing="4",
    align="center",
    width="100%",
    height="10rem",
)

size ist die Länge der Linie, orientation die Richtung, color_scheme die Farbe. direction ist die Richtung des äußeren Flex.

Prop	Werte	Standard	Verwendung
`size`	`"1"` (16px) `"2"` (32px) `"3"` (64px) `"4"` (100%)	`"4"`	Länge der Linie
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	Waagerechte oder senkrechte Linie
`color_scheme`	Radix-Farbname	`"gray"`	Farbe der Linie
`decorative`	`True` / `False`	`True`	Bei True reine Dekoration, die aus dem Barrierefreiheitsbaum herausfällt. Für eine bedeutungstragende Trennung False

size und orientation können mit rx.breakpoints(...) je nach Bildschirmbreite unterschiedlich sein. In Radix Themes ist die Standardgröße "1", aber rx.separator in der installierten Version 0.10 setzt den Standard auf "4", sodass die Linie ohne Angabe das Elternelement ganz ausfüllt.

Länge: size

size="4" füllt die Breite des Elternelements (bei senkrechten Linien die Höhe) ganz aus. CSS width oder height auf "100%" hätte denselben Effekt, aber size funktioniert unabhängig von der Richtung gleich. "1" bis "3" sind feste Längen.

rx.flex(
    rx.separator(size="1"),
    rx.separator(size="2"),
    rx.separator(size="3"),
    rx.separator(size="4"),
    direction="column",
    spacing="4",
    width="100%",
)

Richtung: orientation

Mit orientation="vertical" wird die Linie senkrecht. Damit sie sich mit size="4" strecken kann, braucht das Elternelement eine Höhe. Hier wie in der offiziellen Doku unter dem Namen rx.divider.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.divider(orientation="vertical", size="4"),
    rx.card("Section 2"),
    spacing="4",
    width="100%",
    height="10vh",
)

Kurze senkrechte Linien zwischen Text

Innerhalb einer Zeile, etwa zwischen Menülinks, passt eine kurze senkrechte Linie mit size="1". Gibst du dem äußeren Flex align="center", sitzt die Linie auf mittlerer Texthöhe.

HomeBlogAbout

rx.flex(
    rx.link("Home", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("Blog", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("About", href="#"),
    spacing="3",
    align="center",
)

Auftrag erledigt

Zwischen Namensbereich und Kontaktdaten steht eine waagerechte Linie, und margin_y lässt oben und unten etwas Luft.

Jamie Kim

Potter

jamie@example.com

555-0100

rx.card(
    rx.flex(
        rx.avatar(fallback="JK"),
        rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
        spacing="3",
        align="center",
    ),
    rx.separator(margin_y="12px"),
    rx.vstack(
        rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
        rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
        spacing="2",
    ),
    width="260px",
)

Werkstattnotizen

rx.separator (= rx.divider) zieht eine Linie zwischen Inhalte.
size "1" bis "4" = 16 · 32 · 64px · 100 %. In 0.10 ist der Standard "4" (volle Länge).
Mit orientation="vertical" wird die Linie senkrecht. Strecken kann sie sich nur, wenn das Elternelement eine Höhe hat.
color_scheme bestimmt die Farbe, decorative=False kennzeichnet eine bedeutungstragende Trennung.

← Zurück

Layout · Spacer

Weiter →

Layout · Card

Ü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