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

Typografie

Text

rx.textrx.text.em

Offizielle Doku

Werkstattauftrag

Bitte auf eine Produktkarte: einen fetten Produktnamen, eine kleine graue Beschreibung und einen groß hervorgehobenen Preis.

rx.text ist der grundlegendste Baustein, um Schrift auf den Bildschirm zu bringen. Standardmäßig wird daraus ein <span>-Tag; Größe, Stärke, Ausrichtung und Farbe legst du über Props fest. Du verwendest es für jede Schrift, die keine Überschrift ist: Beschreibungen, Labels, Zahlen.

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

Props ausprobieren

Das Aussehen der Schrift bestimmen die folgenden Props. align ist nur sichtbar, wenn der Text ein Block ist, der die ganze Zeile einnimmt (p, div).

Props ausprobieren

The quick brown fox jumps over the lazy dog.

label

as_

size

weight

align

trim

color

high_contrast

rx.text("The quick brown fox jumps over the lazy dog.", as_="p", size="3", weight="regular", align="left", trim="normal", color_scheme="gray", high_contrast=False)

Stellst du as_ auf span, ist align nicht mehr zu sehen: Ein span ist nur so breit wie sein Text.

Prop	Werte	Standard	Verwendung
`as_`	`"p"` `"label"` `"div"` `"span"` `"b"` `"i"` `"u"` `"abbr"` `"cite"` `"del"` `"em"` `"ins"` `"kbd"` `"mark"` `"s"` `"samp"` `"sub"` `"sup"`	`"span"`	Das tatsächlich erzeugte HTML-Tag; das Aussehen bleibt gleich
`size`	`"1"` bis `"9"`	geerbt	Schriftgröße, Zeilenhöhe und Laufweite
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	geerbt	Schriftstärke
`align`	`"left"` `"center"` `"right"`	geerbt	Ausrichtung innerhalb des Blocks
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Zeilenabstand über und unter dem Text abschneiden
`color_scheme`	Radix-Farbname	Themenfarbe	Textfarbe
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zum Hintergrund
`as_child`	`True` / `False`	`False`	Das Kindelement direkt verwenden und nur die Textstile übertragen

size, weight, align und trim nehmen auch Werte je Bildschirmbreite an ({"initial": "2", "md": "4"}). An Events gibt es nur die Standard-Events wie on_click.

as_: nur die Bedeutung ändern

as_ ändert nur das erzeugte Tag. Die vier Zeilen unten sind p, label, div und span, sehen aber gleich aus. Wählst du das Tag nach der Bedeutung, also p für einen Absatz und label für den Namen eines Eingabefelds, verstehen Screenreader und Suchmaschinen den Inhalt besser.

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

rx.flex(
    rx.text("This is a ", rx.text.strong("paragraph"), " element.", as_="p"),
    rx.text("This is a ", rx.text.strong("label"), " element.", as_="label"),
    rx.text("This is a ", rx.text.strong("div"), " element.", as_="div"),
    rx.text("This is a ", rx.text.strong("span"), " element.", as_="span"),
    direction="column",
    spacing="3",
)

Größe, Stärke, Ausrichtung

size passt nicht nur die Schriftgröße an, sondern auch Zeilenhöhe und Laufweite. Je größer die Schrift, desto kleiner werden Zeilenabstand und Laufweite im Verhältnis. Für langen Fließtext passen 2 bis 4, für UI-Schrift wie ein Label neben einem Button 1 bis 3.

Size 1: captions and hints

Size 2: UI labels

Size 3: body text

Size 5: lead paragraph

Size 7: big numbers

Size 9: hero

rx.flex(
    rx.text("Size 1: captions and hints", size="1"),
    rx.text("Size 2: UI labels", size="2"),
    rx.text("Size 3: body text", size="3"),
    rx.text("Size 5: lead paragraph", size="5"),
    rx.text("Size 7: big numbers", size="7"),
    rx.text("Size 9: hero", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.text("Light", weight="light", as_="div"),
    rx.text("Regular", weight="regular", as_="div"),
    rx.text("Medium", weight="medium", as_="div"),
    rx.text("Bold", weight="bold", as_="div"),
    rx.separator(),
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

trim: Innenabstände in Boxen angleichen

Über und unter jeder Textzeile hängt unsichtbarer Raum, so groß wie der Zeilenabstand. Darum wirkt dasselbe padding oben und unten breiter als links und rechts. trim schneidet diesen Raum ab: "start" oben, "end" unten, "both" beides. Am deutlichsten siehst du den Unterschied in Boxen mit Rahmen, etwa Karten.

Without trim

Typography relates font size, line height and line width.

With trim

Typography relates font size, line height and line width.

rx.flex(
    rx.box(
        rx.heading("Without trim", as_="h2", size="3", margin_bottom="4px"),
        rx.text("Typography relates font size, line height and line width."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h2", size="3", margin_bottom="4px", trim="start"),
        rx.text("Typography relates font size, line height and line width.", trim="end"),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Farbe und Kontrast

color_scheme verwendet statt der Grundfarbe des Themes die angegebene Farbe. Mit high_contrast=True wird die Schrift innerhalb derselben Farbfamilie dunkler und hebt sich besser vom Hintergrund ab. Links der Standard, rechts hoher Kontrast.

indigo

crimson

orange

rx.grid(
    rx.text("indigo", color_scheme="indigo"),
    rx.text("indigo", color_scheme="indigo", high_contrast=True),
    rx.text("crimson", color_scheme="crimson"),
    rx.text("crimson", color_scheme="crimson", high_contrast=True),
    rx.text("orange", color_scheme="orange"),
    rx.text("orange", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="2",
)

Mit anderen Textbausteinen mischen

Gibst du rx.text Zeichenketten zusammen mit rx.link, rx.text.em, rx.code und rx.text.kbd als Kinder, sieht innerhalb eines Satzes nur ein Teil anders aus.

Browser fassen aufeinanderfolgende Leerzeichen zu einem zusammen. Sollen die Leerzeichen erhalten bleiben, setzt du die CSS-Eigenschaft white_space="pre". Vergleiche unten die zweite und die dritte Zeile.

Look, such a helpful link, an italic emphasis, a piece of computer code, and a hotkey Shift + A within the text.

This is not pre formatted

This is pre formatted

rx.flex(
    rx.text(
        "Look, such a helpful ",
        rx.link("link", href="#"),
        ", an ",
        rx.text.em("italic emphasis"),
        ", a piece of computer ",
        rx.code("code"),
        ", and a hotkey ",
        rx.text.kbd("Shift + A"),
        " within the text.",
        size="4",
    ),
    rx.text("This is not pre     formatted"),
    rx.text("This is pre     formatted", white_space="pre"),
    direction="column",
    spacing="3",
)

Auf einer Linie mit der Checkbox

Steckst du eine Checkbox, ein Radio oder einen Switch in ein rx.text mit as_="label", richtet sich das Steuerelement an der Höhe der ersten Textzeile aus, auch wenn der Text mehrzeilig ist. Weil es ein Label ist, schaltet auch ein Klick auf den Text die Checkbox um.

I understand that these documents are confidential and cannot be shared with a third party.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
            spacing="2",
        ),
        as_="label",
        size="3",
    ),
    max_width="300px",
)

Auftrag erledigt

Drei Stufen: der Name fett, die Beschreibung klein und grau, der Preis groß und farbig. Der Text am oberen und unteren Rand der Karte bekommt trim, damit die Abstände gleichmäßig wirken.

Linen Shirt

Breathable linen, relaxed fit. Machine washable.

$49.00

rx.card(
    rx.flex(
        rx.text("Linen Shirt", size="4", weight="bold", trim="start"),
        rx.text("Breathable linen, relaxed fit. Machine washable.", size="2", color_scheme="gray"),
        rx.text("$49.00", size="6", weight="bold", color_scheme="indigo", trim="end"),
        direction="column",
        spacing="2",
    ),
    max_width="320px",
)

Werkstattnotizen

rx.text ist standardmäßig ein span. Mit as_ wählst du das passende Tag wie p, label oder div (das Aussehen bleibt gleich).
size "1" bis "9" passt auch Zeilenhöhe und Laufweite an. Fließtext 2 bis 4, UI-Labels 1 bis 3.
align ist nur bei Blöcken wie p oder div sichtbar. trim gleicht die Abstände oben und unten in Boxen an.
Farbe mit color_scheme, Kontrast mit high_contrast. Leerzeichen erhalten mit white_space="pre".
Mit rx.link, rx.code, rx.text.em und rx.text.kbd als Kindern gestaltest du einen Satz.

← Zurück

Layout · Fragment

Weiter →

Typografie · Heading

Ü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