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
·
Em
·
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
rx.sectionOffizielle Doku
Werkstattauftrag
Bitte die Vorstellungsseite in Abschnitte wie „Funktionen“ und „Preise“ gliedern und jedem Abschnitt oben und unten großzügig Luft geben.
rx.section steht für einen Abschnitt des Seiteninhalts. Er wird als HTML-Element <section> gerendert und hat standardmäßig einen Innenabstand oben und unten. Vor allem ist es eine semantische Komponente: Du nutzt sie, um zusammengehörige Inhalte wie eine Überschrift und den Text dazu zu einem Block zu bündeln.
This is the first content section
This is the second content section
rx.box(
rx.section(
rx.heading("First", as_="h2", size="4"),
rx.text("This is the first content section"),
padding_x="12px",
background_color="var(--gray-2)",
),
rx.section(
rx.heading("Second", as_="h2", size="4"),
rx.text("This is the second content section"),
padding_x="12px",
background_color="var(--gray-3)",
),
width="100%",
)Section hat nur einen Prop, size, und der bestimmt den Abstand oben und unten. Achte darauf, wie sich der freie Raum zwischen den gestrichelten Linien ändert.
Props ausprobieren
Vertical padding comes from the size prop.
size
rx.box(
rx.section(
rx.heading("Features", as_="h2", size="4"),
rx.text("Vertical padding comes from the size prop."),
size="2",
padding_x="12px",
background_color="var(--accent-2)",
border_top="1px dashed var(--accent-8)",
border_bottom="1px dashed var(--accent-8)",
),
width="100%",
)| Prop | Werte | Standard | Verwendung |
|---|---|---|---|
size | "1" (24px) "2" (40px) "3" (64px) | "2" | Innenabstand oben und unten |
padding_x u. a. CSS | CSS-Länge | keiner | Seitlich gibt es standardmäßig keinen Abstand |
size kann mit rx.breakpoints(...) je nach Bildschirmbreite unterschiedlich sein. Radix Themes kennt zwar auch size="4" (80px), aber rx.section in der installierten Version 0.10 akzeptiert nur "1" bis "3".
Drei Sections, die sich nur in der Größe unterscheiden, nebeneinander. Der Text ist gleich, nur der Abstand oben und unten ändert sich.
size 1
size 2
size 3
rx.flex(
rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
spacing="3",
align="start",
width="100%",
)Soll der Abstand auf dem Handy kleiner und auf breiten Bildschirmen größer sein, übergibst du size ein rx.breakpoints.
Small padding on phones, more on wide screens
rx.section(
rx.text("Small padding on phones, more on wide screens"),
size=rx.breakpoints(initial="1", md="3"),
padding_x="12px",
background_color="var(--gray-3)",
width="100%",
)rx.box ist ein bedeutungsloses <div>, rx.section dagegen ein <section> mit der Bedeutung „hier beginnt ein Abschnitt“. Screenreader und Suchmaschinen lesen diese Unterscheidung als Struktur des Dokuments. Gibst du jedem Abschnitt mit rx.heading eine Überschrift, wird die Struktur noch klarer. Ein gängiges Muster: Die Seitenbreite mit rx.container fassen und darin mit Sections gliedern.
Ein Container begrenzt die Textbreite, „Funktionen“ und „Preise“ sind jeweils eine eigene Section. Das rx.separator() dazwischen markiert die Grenze zwischen den Abschnitten.
Pure Python, from the front end to the back end.
Free to start. Pay when your app grows.
rx.container(
rx.section(
rx.heading("Features", as_="h2", size="5"),
rx.text("Pure Python, from the front end to the back end."),
size="2",
),
rx.separator(),
rx.section(
rx.heading("Pricing", as_="h2", size="5"),
rx.text("Free to start. Pay when your app grows."),
size="2",
),
size="2",
width="100%",
)Werkstattnotizen
rx.section ist das Element <section>, eine semantische Komponente, die zusammengehörige Inhalte zu einem Abschnitt bündelt.
size "1" bis "3" ergibt 24 · 40 · 64px Abstand oben und unten. Standard ist "2".
Seitlich gibt es keinen Abstand, den setzt du separat mit padding_x.
Jeder Abschnitt bekommt eine Überschrift mit rx.heading.
Mit rx.container die Breite fassen und darin mit rx.section gliedern.
Über neue Lektionen informiert werden
Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.
R
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© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Fragen & Antworten
Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.