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

Datenanzeige

Badge

rx.badge

Offizielle Doku

Werkstattauftrag

Setz neben jede Zeile der Bestellliste den Status „Bezahlt“, „Ausstehend“ oder „Fehlgeschlagen“, sodass man ihn auf einen Blick erkennt.

rx.badge ist ein kleines Etikett, das den Status oder die Kategorie eines Eintrags kurz anzeigt. Man nutzt es für auffällige Hinweise aus ein, zwei Wörtern wie „New“, „Paid“ oder „Beta“. Text, den du als erstes Argument übergibst, landet direkt im Etikett.

New

rx.badge("New")

Props ausprobieren

Das Aussehen eines Badges bestimmen fünf Props. Ändere einen Wert, und Badge und Code ändern sich gemeinsam.

Props ausprobieren

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variant wählt die Füllart, size die Größe, color_scheme die Farbe. high_contrast verstärkt den Kontrast zwischen Schrift und Hintergrund.

Prop	Werte	Standard	Verwendung
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	Füllart; solid ist am kräftigsten
`size`	`"1"` `"2"` `"3"`	`"1"`	Größe und Innenabstand
`color_scheme`	Radix-Farbname	Themenfarbe	Farbe, die die Bedeutung des Status trägt
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zwischen Schrift und Hintergrund
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Themenwert	Eckenrundung

Größe

size legt Größe und Innenabstand zusammen fest. Der Text der offiziellen Doku nennt nur "1" und "2", Reflex 0.10 akzeptiert aber auch "3".

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

Vier Varianten

solid füllt vollflächig mit Farbe, soft hat einen blassen Hintergrund, surface einen blassen Hintergrund mit Rahmen, outline nur einen Rahmen. Ohne Angabe gilt soft.

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

Bedeutung durch Farbe

color_scheme bestimmt die Farbe dieses Badges unabhängig von der Themenfarbe der ganzen Seite. Gibst du den Farben eine Bedeutung – Erfolg green, Achtung amber, Fehler red –, sieht man den Status, bevor man den Text liest.

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

Kontrast und Ecken

high_contrast=True macht die Schrift dunkler und erhöht so den Kontrast. Oben die Standardreihe, unten die mit hohem Kontrast.

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radius ignoriert den Eckenwert des Themes und legt die Rundung nur für dieses Badge fest. Die Pillenform erhältst du mit "full".

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

Mit Icon

Ein Badge kann nicht nur Text, sondern auch andere Komponenten enthalten. Wie in der offiziellen Doku kannst du Icon und Text mit rx.flex nebeneinanderstellen oder sie einfach als Kinder hintereinander übergeben.

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

Ein Badge, das sich mit dem State ändert

Text und Farbe können beide State-Werte annehmen. Die Farbe wählst du mit rx.match passend zum jeweiligen Status.

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

Auftrag erledigt

Neben jede Bestellnummer kommt ein Status-Badge. Abgeschlossenes (Erstattung) nimmst du mit outline und Grau zurück.

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

Werkstattnotizen

Mit rx.badge("Text") erstellen; für kurze Status- und Kategorieanzeigen.
variant: solid · soft (Standard) · surface · outline.
size reicht von "1" bis "3" (der Doku-Text nennt nur 1 und 2); radius legt die Ecken separat fest.
Bedeutung in color_scheme legen; hängt sie vom State ab, mit rx.match auswählen.
Mit rx.icon oder rx.flex als Kindern lassen sich Icon und Text zusammen zeigen.

← Zurück

Formulare · Upload

Weiter →

Datenanzeige · Avatar

Ü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