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

Formulare

Button

rx.buttonrx.icon_button

Offizielle Doku

Werkstattauftrag

Bitte für die Bezahlseite einen auffälligen „Kaufen“-Button und einen weniger wichtigen „Abbrechen“-Button.

Mit rx.button passiert etwas, sobald man draufklickt. Du setzt ihn überall dort ein, wo Nutzer etwas „ausführen“: speichern, absenden, zum nächsten Schritt, einen Dialog öffnen. Übergibst du einen Text, steht er direkt im Button.

rx.button("Save")

Props ausprobieren

Das Aussehen eines Buttons bestimmen meist fünf Props. Ändere unten die Werte, und Button und Code ändern sich gemeinsam.

Props ausprobieren

label

variant

size

color

radius

high_contrast

disabled

rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)

variant wählt, wie stark der Button hervortritt, size die Größe, color_scheme die Farbe. Mit loading dreht sich statt des Texts ein Spinner, und der Button ist nicht klickbar.

Prop	Werte	Standard	Verwendung
`variant`	`"classic"` `"solid"` `"soft"` `"surface"` `"outline"` `"ghost"`	`"solid"`	Grad der Hervorhebung. solid für die Hauptaktion, soft · outline · ghost für Nebenaktionen
`size`	`"1"` ~ `"4"`	`"2"`	Höhe und Schriftgröße
`color_scheme`	Radix-Farbname (`"indigo"`, `"red"` …)	Themenfarbe	Farbe mit Bedeutung, etwa red für Löschen und green für Erfolg
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Themenwert	Eckenrundung
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zum Hintergrund
`loading`	`True` / `False`	`False`	Spinner zeigen und Klicks sperren
`disabled`	`True` / `False`	`False`	Klicks sperren

Sechs Varianten

Von der stärksten zur schwächsten Hervorhebung. Wenn nur die eine Hauptaktion einer Seite eine kräftige Variante bekommt, wissen Nutzer sofort, wo sie klicken sollen.

rx.flex(
    rx.button("classic", variant="classic"),
    rx.button("solid", variant="solid"),
    rx.button("soft", variant="soft"),
    rx.button("surface", variant="surface"),
    rx.button("outline", variant="outline"),
    rx.button("ghost", variant="ghost"),
    spacing="3",
    wrap="wrap",
)

Mit Icons

Gibst du rx.icon als Kind hinein, steht das Icon neben dem Text. Für Buttons, die nur aus einem Icon bestehen, nimmst du rx.icon_button und gibst ihnen über aria_label einen Namen für Screenreader.

rx.flex(
    rx.button(rx.icon("download"), "Download"),
    rx.button("Next", rx.icon("arrow-right"), variant="soft"),
    rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
    spacing="3",
    align="center",
)

Ein Klick ändert den State

Das Herzstück eines Buttons ist on_click. Verbindest du einen Event-Handler des States, ändert jeder Klick den Wert auf dem Server, und die Anzeige zieht nach. Du kannst Text und State-Werte gemischt als Kinder übergeben.

class ButtonCountState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1

    @rx.event
    def reset_count(self):
        self.count = 0


rx.flex(
    rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
    rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
    spacing="3",
)

Auftrag erledigt

Die Hauptaktion „Kaufen“ bekommt solid, das zurücknehmende „Abbrechen“ wird mit soft und Grau zurückgenommen.

rx.flex(
    rx.button("Cancel", variant="soft", color_scheme="gray"),
    rx.button(rx.icon("shopping-cart"), "Buy now"),
    spacing="3",
    justify="end",
)

Werkstattnotizen

Mit rx.button("Text") erzeugen und einen Event-Handler an on_click hängen.
variant: classic · solid · soft · surface · outline · ghost. Nur die eine Hauptaktion kräftig.
size von "1" bis "4", color_scheme als Farbe mit Bedeutung, loading und disabled sperren Klicks.
Icons als Kind mit rx.icon, reine Icon-Buttons mit rx.icon_button + aria_label.
Als Absende-Button in einem Formular: type="submit" (mehr dazu auf der Seite Form).

← Zurück

Typografie · Kbd

Weiter →

Formulare · Input

Ü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