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

Heading

rx.heading

Offizielle Doku

Werkstattauftrag

Bitte auf die Aktionsseite unseres Onlineshops einen großen Seitentitel und darunter zwei gleich große Kategorieüberschriften.

rx.heading ist die Überschrift für Seiten und Abschnitte. Es nutzt dieselben Text-Props wie rx.text (size, weight, align, trim, Farbe), ist aber standardmäßig fett und groß; mit as_ legst du die Überschriftenebene h1 bis h6 fest. Die Ebenen bilden die Gliederung des Dokuments, deshalb betrachtest du sie getrennt vom Aussehen.

The quick brown fox jumps over the lazy dog.

rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")

Props ausprobieren

Änderst du as_, bleibt die Anzeige gleich; die Größe ändert sich erst mit size. Probiere beide getrennt aus und vergleiche.

Props ausprobieren

Spring Collection

label

as_

size

weight

align

trim

color

high_contrast

rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_ legt die Dokumentstruktur fest (h1 bis h6), size die sichtbare Größe. Die beiden Props beeinflussen sich nicht.

Prop	Werte	Standard	Verwendung
`as_`	`"h1"` bis `"h6"`	`"h1"`	Überschriftenebene (Dokumentstruktur); das Aussehen bleibt gleich
`size`	`"1"` bis `"9"`	`"6"`	Sichtbare Größe, Zeilenhöhe und Laufweite
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	`"bold"`	Schriftstärke
`align`	`"left"` `"center"` `"right"`	geerbt	Ausrichtung
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Zeilenabstand oben und unten abschneiden
`color_scheme`	Radix-Farbname	Themenfarbe	Textfarbe
`high_contrast`	`True` / `False`	`False`	Stärkerer Kontrast zum Hintergrund
`as_child`	`True` / `False`	`False`	Nur die Überschriftenstile auf das Kindelement übertragen

An Events gibt es nur die Standard-Events wie on_click.

as_ ist Struktur, size ist Aussehen

Die oberen drei Zeilen sind h2, h3 und h4, also verschiedene Ebenen, aber gleich groß, denn as_ ändert nur die Bedeutung. Verkleinerst du wie in den unteren drei Zeilen size selbst, je tiefer die Ebene liegt, passen Struktur und Aussehen zusammen. Üblich ist genau ein h1 pro Seite.

Level 2

Level 3

Level 4

Page title

Section

Subsection

rx.flex(
    rx.heading("Level 2", as_="h2"),
    rx.heading("Level 3", as_="h3"),
    rx.heading("Level 4", as_="h4"),
    rx.separator(),
    rx.heading("Page title", as_="h1", size="8"),
    rx.heading("Section", as_="h2", size="6"),
    rx.heading("Subsection", as_="h3", size="4"),
    direction="column",
    spacing="3",
)

Größe, Stärke, Ausrichtung

size reicht von "1" bis "9". Je größer die Schrift, desto kleiner werden Zeilenabstand und Laufweite im Verhältnis, sodass auch große Überschriften nicht locker wirken.

Size 1

Size 3

Size 5

Size 7

Size 9

rx.flex(
    rx.heading("Size 1", size="1"),
    rx.heading("Size 3", size="3"),
    rx.heading("Size 5", size="5"),
    rx.heading("Size 7", size="7"),
    rx.heading("Size 9", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

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

trim: Abstand über der Überschrift angleichen

Überschriften haben große Schrift und damit auch viel Zeilenabstand. Schneidest du mit trim="start" den oberen Raum ab, wirkt der obere Innenabstand einer Karte oder Box genauso breit wie der seitliche. "both" schneidet oben und unten ab.

Without Trim

With Trim

With trim

The heading now sits as close to the top edge as the text does to the sides.

rx.flex(
    rx.heading(
        "Without Trim",
        as_="h2",
        trim="normal",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.heading(
        "With Trim",
        as_="h2",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
        rx.text("The heading now sits as close to the top edge as the text does to the sides."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Farbe und Kontrast

Mit color_scheme nimmst du eine andere Farbe als das Theme, mit high_contrast=True wird sie innerhalb derselben Familie dunkler. Links der Standard, rechts hoher Kontrast.

Indigo

Cyan

Crimson

rx.grid(
    rx.heading("Indigo", as_="h3", color_scheme="indigo"),
    rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
    rx.heading("Cyan", as_="h3", color_scheme="cyan"),
    rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
    rx.heading("Crimson", as_="h3", color_scheme="crimson"),
    rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
    columns="2",
    spacing="2",
)

Größe je nach Bildschirmbreite

size, weight, align und trim nehmen statt einer Zeichenkette auch ein dict mit Werten je Bildschirmbreite. Die Überschrift unten ist auf schmalen Bildschirmen "4", ab sm "6" und ab md "8". Mach das Fenster schmaler und sieh zu.

Resize the window

rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})

Auftrag erledigt

Der Seitentitel wird ein großes h1, die beiden Kategorieüberschriften werden h2 in gleicher Größe. Der oberste Titel bekommt trim="start", damit der Abstand darüber kleiner wird.

Spring Collection

New arrivals for warmer days.

Shirts

Linen and cotton, six colors.

Shoes

Light sneakers and sandals.

rx.box(
    rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
    rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
    rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
    rx.text("Linen and cotton, six colors.", size="2"),
    rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
    rx.text("Light sneakers and sandals.", size="2"),
)

Werkstattnotizen

rx.heading ist standardmäßig h1, size "6", fett. Mit as_ legst du die Ebene h1 bis h6 fest.
as_ ändert nur die Dokumentstruktur, size nur das Aussehen. Bei tieferen Ebenen verkleinerst du size selbst.
weight, align, color_scheme und high_contrast funktionieren wie bei rx.text.
trim="start" gleicht den Abstand über einer Überschrift in einer Box an.
Werte je Bildschirmbreite gehen so: size={"initial": "4", "md": "8"}.

← Zurück

Typografie · Text

Weiter →

Typografie · Link

Ü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