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

Kbd

rx.text.kbd

Offizielle Doku

Werkstattauftrag

Bitte ins Hilfefenster der Notiz-App eine Tabelle der Tastenkürzel, mit Funktionsname und Kürzel nebeneinander.

rx.text.kbd zeigt Tasten oder Tastenkürzel in Form von Tastenkappen. Daraus wird ein HTML-<kbd>-Tag. Du nimmst es in Hilfetexten, Kürzelübersichten und Tutorials an Stellen wie „Drück diese Taste“.

Shift + Tab

rx.text.kbd("Shift + Tab")

Props ausprobieren

Kbd hat nur eine Prop für das Aussehen: size. Ändere den Text und schreib auch andere Tasten hinein.

Props ausprobieren

Ctrl + K

label

size

rx.text.kbd("Ctrl + K", size="3")

Mit größerem size wachsen Tastenkappe und Schrift gemeinsam.

Prop	Werte	Standard	Verwendung
Kind	Zeichenkette, State-Wert	Pflicht	Tastenname
`size`	`"1"` bis `"9"`	geerbt	Größe von Tastenkappe und Schrift

Anders als bei Text oder Heading kennt der Kbd-Typ in 0.10 keine Werte je Bildschirmbreite (dict) für size. An Events gibt es nur die Standard-Events.

Größe

size reicht von "1" bis "9". Je größer, desto kleiner werden Zeilenabstand und Laufweite im Verhältnis. Ohne Angabe folgt die Größe dem umgebenden Text.

Shift + TabShift + TabShift + TabShift + TabShift + Tab

rx.flex(
    rx.text.kbd("Shift + Tab", size="1"),
    rx.text.kbd("Shift + Tab", size="3"),
    rx.text.kbd("Shift + Tab", size="5"),
    rx.text.kbd("Shift + Tab", size="7"),
    rx.text.kbd("Shift + Tab", size="9"),
    direction="column",
    align="start",
    spacing="3",
)

Kürzel im Satz

Als Kind eines rx.text steht die Tastenkappe mitten im Satz. Du kannst jede Taste einzeln umschließen oder die ganze Kombination auf einmal.

Press Ctrl + S to save.

Undo with Ctrl + Z, redo with Ctrl + Y.

rx.flex(
    rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
    rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
    direction="column",
    spacing="3",
)

Gedrückte Tasten als Tastenkappe zeigen

on_key_down eines Eingabefelds liefert den Namen der gedrückten Taste und ob Ctrl, Alt, Shift oder Meta mitgedrückt wurden. Diese Werte legst du im State ab und zeigst sie mit rx.text.kbd an. Klicke ins Eingabefeld und drücke etwa Shift+K oder Alt+1.

?

class KbdKeyState(rx.State):
    key: str = "?"
    mods: list[str] = []

    @rx.event
    def press(self, key: str, info: rx.event.KeyInputInfo):
        names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
        self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
        self.key = "Space" if key == " " else key


rx.flex(
    rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
    rx.flex(
        rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
        rx.text.kbd(KbdKeyState.key, size="4"),
        spacing="2",
        align="center",
    ),
    direction="column",
    align="start",
    spacing="3",
)

Auftrag erledigt

Funktionsname und Kürzel kommen in zwei Spalten einer rx.table, und nur die Kürzelspalte wird mit rx.text.kbd umschlossen.

Save	`Ctrl + S`
Search	`Ctrl + K`
New note	`Ctrl + N`
Close	`Esc`

rx.table.root(
    rx.table.body(
        rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
        rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
        rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
        rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
    ),
    size="1",
    max_width="320px",
)

Werkstattnotizen

rx.text.kbd("…") zeigt einen Tastennamen als Tastenkappe (<kbd>).
Einzige Prop für das Aussehen: size "1" bis "9". Ohne Angabe folgt sie der Größe des äußeren Texts.
Als Kind in einen Satz setzen: jede Taste einzeln oder die ganze Kombination auf einmal.
Mit on_key_down(key, info) empfängst du gedrückte Tasten und zeigst sie über den State an.

← Zurück

Typografie · Em

Weiter →

Formulare · Button

Ü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