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
Alle 100 Komponenten der offiziellen Reflex-Bibliothek, je eine Seite. Ein praktischer Bildband: Ändere die Props und sieh zu, wie sich Oberfläche und Python-Code gemeinsam ändern.
Die offizielle Reflex-Bibliothek enthält 100 Komponenten, von Buttons über Diagramme und Datentabellen bis zu Dialogen. Dieser Kurs ist ein Komponentenkatalog, der diese 100 Bausteine behandelt: eine Seite pro Komponente.
Ab heute bist du Lehrling in der „Komponentenwerkstatt“. In der Werkstatt gehen Aufträge für Oberflächenbausteine ein, und an jeder Seite hängt ein Auftragszettel. Sobald du die Komponente kennst, kannst du den bestellten Baustein selbst bauen.
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx.-Namen, um die es auf der Seite geht, und ein Link zur offiziellen Doku.Werkstattauftrag
Zum Beispiel: „Auf der Bezahlseite ein auffälliger Kaufen-Button und ein weniger wichtiger Abbrechen-Button.“ Einen solchen Auftrag findest du auf jeder Seite.
| Regal | Anzahl | Inhalt |
|---|---|---|
| Layout | 13 | Box, Flex, Stack, Grid, Container, Card … das Gerüst der Seite |
| Typografie | 10 | Text, Heading, Link, Code, Markdown … Schrift |
| Formulare | 10 | Button, Input, Checkbox, Select, Slider, Form, Upload … Eingaben entgegennehmen |
| Datenanzeige | 11 | Badge, Avatar, Icon, Callout, Progress … Informationen zeigen |
| Auf- und Zuklappen | 3 | Tabs, Accordion, Segmented Control |
| Overlays | 9 | Tooltip, Popover, Dialog, Drawer, Dropdown Menu, Toast … alles, was darüber erscheint |
| Dynamisches Rendern | 4 | Cond, Match, Foreach, Auto Scroll: je nach State eine andere Anzeige |
| Medien | 3 | Image, Audio, Video |
| Tabellen und Datengrids | 3 | Table, Data Table, Data Editor |
| Diagramme | 12 | Area, Bar, Line, Pie, Radar, Scatter, Sankey … (Recharts) |
| Diagrammbausteine | 7 | Axis, Grid, Tooltip, Legend, Label, Reference, Brush |
| Andere Diagrammbibliotheken | 2 | Plotly, Pyplot |
| HTML-Elemente | 7 | reine HTML-Tags über rx.el |
| Weitere Werkzeuge | 6 | Theme, Skeleton, Clipboard, Html Embed, Script, Memo |
Du musst nicht der Reihe nach lesen. Spring über die Liste links direkt zu der Komponente, die du brauchst. Wenn du neu bist, fang am besten mit Layout und Formularen an.
Werkstattnotizen
Eine Seite = eine Komponente. Oben die echte Anzeige, darunter ihr Code.
Wer unter „Props ausprobieren“ einen Wert ändert, ändert auch den Code. Eine gelungene Kombination kopierst du einfach.
Beispiele, die State brauchen, zeigen die State-Klasse gleich mit.
Ü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.