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

Callout

rx.calloutrx.callout.rootrx.callout.iconrx.callout.text

Offizielle Doku

Werkstattauftrag

Zeig oben auf der Bezahlseite gut sichtbar die Warnung „Ihre Karte wurde abgelehnt“ an und darunter dezent einen Versandhinweis.

rx.callout ist ein kurzer Hinweistext, der die Aufmerksamkeit des Nutzers wecken soll. Als erstes Argument übergibst du den Text, mit icon den Namen des Icons davor. Für den Icon-Namen nimmst du direkt den Lucide-Namen wie auf der Seite Icon.

You will need admin privileges to install and access this application.

rx.callout(
    "You will need admin privileges to install and access this application.",
    icon="info",
)

Props ausprobieren

Your trial ends in 3 days.

text

icon

size

variant

color

high_contrast

rx.callout("Your trial ends in 3 days.", icon="info", size="2", variant="soft", color_scheme="indigo", high_contrast=False)

size wählt die Größe, variant die Füllart, color_scheme die Farbe. Änderst du den icon-Namen, wechselt das Icon davor.

Prop	Werte	Standard	Verwendung
Erstes Argument (`text`)	Text	Pflicht	Der Hinweissatz
`icon`	Lucide-Icon-Name	keiner	Icon davor; ohne Angabe nur Text ohne Icon
`size`	`"1"` `"2"` `"3"`	`"2"`	Schriftgröße und Innenabstand
`variant`	`"soft"` `"surface"` `"outline"`	`"soft"`	Füllart
`color_scheme`	Radix-Farbname	Themenfarbe	Farbe, die die Art des Hinweises trägt
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast
`role`	`"alert"` u. a.	keiner	Rolle, die Screenreadern mitgeteilt wird

Als Warnung

Mit Rot, einem Warn-Icon und role="alert" liest auch ein Screenreader den Text sofort vor. Das nutzt du für Inhalte, die sofort gemeldet werden müssen, etwa Fehler oder verweigerten Zugriff.

Access denied. Please contact the network administrator to view this page.

rx.callout(
    "Access denied. Please contact the network administrator to view this page.",
    icon="triangle_alert",
    color_scheme="red",
    role="alert",
)

Größe und variant

size reicht von "1" bis "3". Je größer die Zahl, desto größer Schrift und Abstände.

Size 3

Size 2

Size 1

rx.flex(
    rx.callout("Size 3", icon="info", size="3"),
    rx.callout("Size 2", icon="info", size="2"),
    rx.callout("Size 1", icon="info", size="1"),
    direction="column",
    spacing="3",
    align="start",
)

Bei variant gibt es drei Möglichkeiten: den Standard "soft" (blasser Hintergrund), "surface" (blasser Hintergrund mit Rahmen) und "outline" (nur Rahmen).

soft (default)

surface

outline

rx.flex(
    rx.callout("soft (default)", icon="info", variant="soft"),
    rx.callout("surface", icon="info", variant="surface"),
    rx.callout("outline", icon="info", variant="outline"),
    direction="column",
    spacing="3",
)

Farbe und Kontrast

color_scheme legt die Farbe des Hinweises unabhängig vom Theme fest. Trennst du Erfolg, Achtung und Fehler nach Farben, erkennt man die Art, bevor man den Text liest.

Your changes were saved.

Your trial ends in 3 days.

Payment failed.

rx.flex(
    rx.callout("Your changes were saved.", icon="circle_check", color_scheme="green"),
    rx.callout("Your trial ends in 3 days.", icon="clock", color_scheme="amber"),
    rx.callout("Payment failed.", icon="circle_x", color_scheme="red"),
    direction="column",
    spacing="3",
)

high_contrast=True macht die Schrift dunkler und erhöht so den Kontrast.

Default contrast

High contrast

rx.flex(
    rx.callout("Default contrast", icon="info"),
    rx.callout("High contrast", icon="info", high_contrast=True),
    direction="column",
    spacing="3",
)

Aus Einzelteilen zusammenbauen

rx.callout("Text", icon=…) ist eigentlich eine Abkürzung, die drei Teile auf einmal erzeugt. Legst du rx.callout.icon (Platz für das Icon) und rx.callout.text (Platz für den Text) in rx.callout.root, erhältst du dasselbe Aussehen. So baust du ihn zusammen, wenn du einen Link mitten in den Text setzen oder dem Icon eigene Props geben willst. Die Aussehens-Props (size, variant, color_scheme, high_contrast) gibst du an root.

You will need admin privileges to install this application.

rx.callout.root(
    rx.callout.icon(rx.icon("info")),
    rx.callout.text(
        "You will need ",
        rx.link("admin privileges", href="#"),
        " to install this application.",
    ),
    color_scheme="blue",
)

Auftrag erledigt

Die abgelehnte Zahlung kommt groß als rote Warnung, der Versandhinweis dezent mit surface und kleiner Größe.

Your card was declined. Please use another payment method.

Orders placed after 3 PM ship the next business day.

rx.flex(
    rx.callout(
        "Your card was declined. Please use another payment method.",
        icon="triangle_alert",
        color_scheme="red",
        role="alert",
    ),
    rx.callout.root(
        rx.callout.icon(rx.icon("info")),
        rx.callout.text("Orders placed after 3 PM ship the next business day."),
        variant="surface",
        size="1",
    ),
    direction="column",
    spacing="3",
)

Werkstattnotizen

Mit rx.callout("Text", icon="info") entsteht ein kurzer Hinweistext.
size "1" bis "3", variant: soft (Standard) · surface · outline; color_scheme zeigt die Art des Hinweises.
Fehler, die sofort gemeldet werden müssen: color_scheme="red" und role="alert".
Für Links u. Ä. im Text aus callout.root + callout.icon + callout.text zusammenbauen.

← Zurück

Datenanzeige · Icon

Weiter →

Datenanzeige · List

Ü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