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

Avatar

rx.avatar

Offizielle Doku

Werkstattauftrag

Setz oben auf die Profilkarte ein rundes Foto des Nutzers. Wer kein Foto hat, bekommt stattdessen den Anfangsbuchstaben seines Namens.

rx.avatar ist ein kleines Bild, das für einen Nutzer steht. Übergibst du eine Bildadresse in src, erscheint das Foto; gibst du ohne src nur fallback an, erscheint ein Text wie etwa Initialen. Man setzt es überall dort ein, wo gezeigt wird, „wer“ das ist: in Kommentaren, Profilen oder Teilnehmerlisten.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200"),
    rx.avatar(fallback="RX"),
    spacing="3",
)

Props ausprobieren

Löschst du src, erscheint der fallback-Text. variant, color_scheme und high_contrast wirken auf das Aussehen dieses Ersatztexts.

Props ausprobieren

src

fallback

size

variant

color

radius

high_contrast

rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)

Ist src leer, erscheint fallback. size reicht von "1" bis "9", mit radius "full" wird es ein Kreis.

Prop	Werte	Standard	Verwendung
`src`	Bildadresse	keiner	Anzuzeigendes Foto
`fallback`	Text	keiner	Was erscheint, wenn es kein Foto gibt oder es nicht lädt
`size`	`"1"` ~ `"9"`	`"3"`	Größe
`variant`	`"solid"` `"soft"`	`"soft"`	Hintergrundfüllung des Ersatztexts
`color_scheme`	Radix-Farbname	Themenfarbe	Farbe des Ersatztexts
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zwischen Ersatztext und Hintergrund
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Themenwert	Eckenrundung

Größe

size reicht von "1" bis "9"; ohne Angabe gilt "3". Für kleine Gesichter in Listen passen "1"–"2", für den Kopf eines Profils "6" und mehr.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
    spacing="2",
    align="center",
    wrap="wrap",
)

variant und Farbe

variant bestimmt den Hintergrund des Ersatztexts. "solid" füllt vollflächig mit Farbe, der Standard "soft" füllt blass. color_scheme setzt die Farbe unabhängig vom Theme.

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", color_scheme="indigo"),
    rx.avatar(fallback="RX", color_scheme="cyan"),
    rx.avatar(fallback="RX", color_scheme="orange"),
    rx.avatar(fallback="RX", color_scheme="crimson"),
    spacing="2",
    wrap="wrap",
)

high_contrast=True verstärkt den Kontrast zwischen Ersatztext und Hintergrund. Links die Standardspalte, rechts die mit hohem Kontrast.

rx.grid(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="solid", high_contrast=True),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", variant="soft", high_contrast=True),
    rows="2",
    flow="column",
    spacing="2",
    width="max-content",
)

Ecken

radius ignoriert den Eckenwert des Themes und legt die Rundung nur für diesen Avatar fest. Das gilt für Foto und Ersatztext gleichermaßen.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
    spacing="2",
)

Wenn das Foto nicht lädt

fallback ist der Inhalt, der erscheint, wenn src nicht geladen werden kann. Die beiden Avatare unten zeigen auf nicht vorhandene Dateien, deshalb siehst du den Ersatztext. In Reflex 0.10 nimmt fallback nur Text (str) an.

rx.flex(
    rx.avatar(src="/no-such-photo.png", fallback="PC"),
    rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
    spacing="2",
)

Auftrag erledigt

In die Karte kommen ein großer Avatar, Name und Benutzername sowie ein Bearbeiten-Button in eine Zeile. Lädt das Foto nicht, erscheint stattdessen „RU“.

Reflex User

@reflexuser

rx.card(
    rx.flex(
        rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
        rx.flex(
            rx.text("Reflex User", weight="bold", size="4"),
            rx.text("@reflexuser", color_scheme="gray", size="2"),
            direction="column",
        ),
        rx.spacer(),
        rx.button("Edit Profile", variant="soft", size="2"),
        spacing="4",
        align="center",
        width="100%",
    ),
    max_width="420px",
)

Werkstattnotizen

rx.avatar(src=…) gibt das Foto, fallback=… den Ersatztext. Am sichersten gibst du beides an.
size "1" bis "9" (Standard "3"); mit radius="full" wird es ein Kreis.
variant (solid · soft), color_scheme und high_contrast ändern das Aussehen des Ersatztexts.
Lässt sich src nicht laden, erscheint automatisch fallback.

← Zurück

Datenanzeige · Badge

Weiter →

Datenanzeige · Icon

Ü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