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

Code

rx.code

Offizielle Doku

Werkstattauftrag

Bitte die Befehle und Dateinamen im Installationshinweis mit einer Festbreitenschrift hervorheben.

rx.code zeigt kurzen Code, Befehle und Dateinamen im Satz in Festbreitenschrift auf hellem Hintergrund an. Daraus wird ein HTML-<code>-Tag. Für mehrzeiligen Code mit Syntaxhervorhebung nimmst du rx.code_block.

console.log()

rx.code("console.log()")

Props ausprobieren

Mit variant änderst du Hintergrund und Rahmen, mit size und weight die Schrift, mit color_scheme die Farbe.

Props ausprobieren

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost ändert nur Schrift und Farbe, ohne Hintergrund. high_contrast macht den Text dunkler.

Prop	Werte	Standard	Verwendung
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	Form von Hintergrund und Rahmen
`size`	`"1"` bis `"9"`	geerbt	Schriftgröße
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	geerbt	Schriftstärke
`color_scheme`	Radix-Farbname	Themenfarbe	Farbe
`high_contrast`	`True` / `False`	`False`	Dunklerer Text

Der variant-Typ in Reflex 0.10 enthält auch "classic" und "surface", aber Radix definiert für Code nur das Aussehen der vier oben genannten. An Events gibt es nur die Standard-Events.

Vier Varianten und Kontrast

Die linke Spalte ist der Standard, die rechte high_contrast=True. Im Fließtext ist soft am unauffälligsten; soll es ins Auge fallen, nimmst du solid, und ohne Hintergrund ghost.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

Größe und Stärke

size reicht von "1" bis "9"; je größer, desto kleiner werden Zeilenabstand und Laufweite im Verhältnis. Steht der Code in einem Satz und du gibst kein size an, übernimmt er die Größe des umgebenden Texts.

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

Farbe

Mit color_scheme nimmst du statt der Themenfarbe eine andere. Richte dich nach der Bedeutung: red für Code in Fehlermeldungen, gray für neutrale Dateinamen.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

Im Satz verwenden

Mischst du als Kinder von rx.text Zeichenketten und rx.code, steht der Code mitten im Satz. Die Größe folgt dem size des äußeren rx.text.

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

Auftrag erledigt

Befehle bekommen das Standard-soft, Dateinamen ein graues outline. Der Hinweiskasten ist ein rx.callout.

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

Werkstattnotizen

rx.code("…") ist kurzer Code im Satz. Mehrzeilig und mit Syntaxhervorhebung: rx.code_block.
variant: solid · soft (Standard) · outline · ghost. Dunkler mit high_contrast.
Ohne size übernimmt er die Größe des umgebenden rx.text.
color_scheme nach Bedeutung wählen (Fehler red, neutral gray).

← Zurück

Typografie · Link

Weiter →

Typografie · Markdown

Ü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