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

HTML-Elemente

HTML Text

rx.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr

Offizielle Doku

Werkstattauftrag

Bitte zeichne in einer Zeile der Release Notes Version, Datum, neues Tastenkürzel und entfernte Funktion jeweils mit dem passenden HTML-Textelement aus.

Das sind 26 HTML-Elemente, die einzelnen Wörtern innerhalb eines Satzes Bedeutung geben: Hervorhebung, Code, Tastaturtasten, Zitate, Hochstellung, Datumsangaben und Ähnliches. Die meisten sind Inline-Elemente, die im Textfluss bleiben, deshalb mischst du sie in rx.el.p oder rx.text. Der Browser gibt ihnen ein Standardaussehen (fett, kursiv, Festbreite), und Suchmaschinen wie Screenreader lesen ihre Bedeutung.

Press Ctrl + S to save your work.

rx.el.p(
    "Press ",
    rx.el.kbd("Ctrl"),
    " + ",
    rx.el.kbd("S"),
    " to ",
    rx.el.strong("save"),
    " your work.",
)

Props ausprobieren

Textelemente haben kaum eigene Attribute und werden über gemeinsame Attribute und Stile gesteuert. Ändere die Hintergrundfarbe von mark und das dir (Schreibrichtung) von bdo.

Props ausprobieren

Reflex | Reflex | Reflex

word

mark_color

direction

size

rx.el.p(
    rx.el.mark("Reflex", background="yellow"),
    " | ",
    rx.el.bdo("Reflex", dir="rtl"),
    " | ",
    rx.el.small("Reflex"),
    font_size="18px",
)

Mit dir="rtl" dreht bdo die Zeichenfolge glatt um. mark · small ändern ihr Aussehen per Stil.

Prop	Werte	Standard	Verwendung
`value` (data)	String · Zahl	keiner	Maschinenlesbarer Wert hinter dem lesbaren Text
`date_time` (time)	`"2026-05-01"`, `"09:00"` …	keiner	Standardformat für Datum · Uhrzeit
`cite` (q)	URL	keiner	Adresse der Zitatquelle (nicht sichtbar)
`title` (abbr, dfn)	String	keiner	Ausgeschriebene Form einer Abkürzung. Erscheint beim Überfahren mit der Maus
`dir` (bdo, bdi)	`"ltr"` `"rtl"`	vom Elternelement	Schreibrichtung
Gemeinsame Attribute · Stile	`id` `class_name` `color` …	keiner	Für alle Textelemente nutzbar

Hervorhebung und Bedeutung

Manche Paare sehen gleich aus, bedeuten aber Verschiedenes. strong heißt wichtig, b einfach fett. em ist Betonung beim Sprechen, i eine andere Stimme (Fachbegriff, Fremdwort). u ist eine Anmerkung, die unterstrichen gehört, s ein nicht mehr zutreffender Inhalt, mark ein Textmarker und small ein kleiner Zusatz.

strong important · b just bold

em stressed · i different voice

u annotated · s no longer true

mark highlighted · small side note

rx.el.div(
    rx.el.p(rx.el.strong("strong"), " important  ·  ", rx.el.b("b"), " just bold"),
    rx.el.p(rx.el.em("em"), " stressed  ·  ", rx.el.i("i"), " different voice"),
    rx.el.p(rx.el.u("u"), " annotated  ·  ", rx.el.s("s"), " no longer true"),
    rx.el.p(rx.el.mark("mark"), " highlighted  ·  ", rx.el.small("small"), " side note"),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Code und Tastatur

code ist ein Codeschnipsel, kbd eine Taste, die der Nutzer drücken soll, samp eine Programmausgabe. Alle drei erscheinen in Festbreitenschrift.

Run reflex run in the terminal.

Then press Ctrl + C to stop.

The terminal prints: App running at http://localhost:3000

rx.el.div(
    rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
    rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
    rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Zitat, Quelle, Definition

q ist ein kurzes Zitat, um das der Browser Anführungszeichen setzt. Ins Attribut cite kommt die Quelladresse, ins Element cite der Titel eines Werks. dfn ist ein Begriff, der an dieser Stelle definiert wird, abbr eine Abkürzung, deren ausgeschriebene Form in title steht.

As The Zen of Python says: Simple is better than complex.

A component is a reusable piece of UI.

rx.el.div(
    rx.el.p(
        "As ",
        rx.el.cite("The Zen of Python"),
        " says: ",
        rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
    ),
    rx.el.p(
        "A ",
        rx.el.dfn("component"),
        " is a reusable piece of ",
        rx.el.abbr("UI", title="User Interface"),
        ".",
    ),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Hochgestellt, tiefgestellt, Zeilenumbruch

sub·sup nimmst du für chemische Formeln und Exponenten. br bricht genau dort die Zeile um, wbr markiert „hier darf umgebrochen werden“. Die Box unten ist schmal, deshalb wird das lange Wort an den wbr-Stellen getrennt.

Water is H₂O. Energy is mc².

Line one
Line two after br

Supercalifragilisticexpialidocious

rx.el.div(
    rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
    rx.el.p("Line one", rx.el.br(), "Line two after br"),
    rx.el.p(
        "Super",
        rx.el.wbr(),
        "califragilistic",
        rx.el.wbr(),
        "expialidocious",
        width="120px",
        padding="6px",
        border="1px dashed gray",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

Maschinenlesbare Werte

data und time zeigen auf dem Bildschirm Text für Menschen und verstecken im Attribut einen Standardwert für Programme. Äußerlich sehen sie wie normaler Text aus.

Price: $12

Opens on May 1st

Starts at 9 am

rx.el.div(
    rx.el.p("Price: ", rx.el.data("$12", value=12)),
    rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
    rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Schreibrichtung und Ruby

bdi isoliert Text unbekannter Richtung (etwa Benutzernamen) von der Umgebung, damit die Reihenfolge nicht durcheinandergerät, wenn sich Rechts-nach-links-Text einmischt. bdo erzwingt eine Richtung. ruby·rt setzen eine Lesehilfe über ostasiatische Schriftzeichen, und rp sind Klammern, die nur in Browsern ohne Ruby-Unterstützung erscheinen.

Winner: إيان - 3 points

bdo rtl: Hello

漢(kan)字(ji)

rx.el.div(
    rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
    rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
    rx.el.p(
        rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
        font_size="24px",
    ),
    display="flex",
    flex_direction="column",
    gap="6px",
)

Auftrag erledigt

Die Version steht in strong, das Datum in time, das Tastenkürzel in kbd, Entferntes in s, Neues in mark und Zusatzinfos in small und abbr.

v2.1 · released Oct 24, 2026

Search now opens with Ctrl + K. ~~Slash key~~ New shortcut.

Requires API v3.

rx.el.div(
    rx.el.p(
        rx.el.strong("v2.1"),
        " · released ",
        rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
    ),
    rx.el.p(
        "Search now opens with ",
        rx.el.kbd("Ctrl"),
        " + ",
        rx.el.kbd("K"),
        ". ",
        rx.el.s("Slash key"),
        " ",
        rx.el.mark("New shortcut"),
        ".",
    ),
    rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
    padding="12px 16px",
    border_left=f"4px solid {rx.color('indigo', 9)}",
    background=rx.color("gray", 2),
    display="flex",
    flex_direction="column",
    gap="4px",
)

Werkstattnotizen

Textelemente geben Wörtern im Satz eine Bedeutung. In rx.el.p mit normalem Text mischen.
strong/b, em/i sehen gleich aus, bedeuten aber Verschiedenes. Mit Bedeutung: strong · em.
code ist Code, kbd eine zu drückende Taste, samp eine Programmausgabe.
Eigene Attribute gibt es nur drei: value bei data, date_time bei time, cite bei q. Alles andere über gemeinsame Attribute und Stile.
bdi · bdo für die Schreibrichtung, ruby · rt · rp für Lesehilfen, wbr für erlaubte Umbruchstellen.

← Zurück

HTML-Elemente · HTML

Weiter →

HTML-Elemente · HTML Layout

Ü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