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

Weitere Werkzeuge

Theme

rx.themerx.theme_panel

Offizielle Doku

Werkstattauftrag

Lass die ganze Website, wie sie ist, und stell nur die Box mit dem Aktionsbanner auf Türkis mit pillenförmigen Ecken um.

rx.theme ist der Theme-Provider, der Farben, Ecken und Größenverhältnisse der Radix-Komponenten festlegt. Normalerweise legst du ihn einmal um die ganze App, und umschließt du innerhalb einer Seite erneut, überschreibt das nur den inneren Teil mit einem anderen Theme. Alle Beispiele auf dieser Seite sind solche Überschreibungen, der Rest der Website bleibt unverändert.

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

Props ausprobieren

Hier ist eine einzelne Karte mit rx.theme umschlossen. Änderst du das Theme, ziehen Button, Badge, Switch und Karte alle zugleich mit.

Props ausprobieren

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color ist die Akzentfarbe, gray_color der Farbton des Graus, radius die Ecken, scaling das Größenverhältnis insgesamt. Mit has_background bekommt der Theme-Bereich eine Hintergrundfarbe.

Prop	Werte	Standard	Verwendung
`accent_color`	26 Radix-Farbnamen	`"indigo"`	Akzentfarbe für Buttons, Links, Switches usw.
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	Grautöne. auto wählt ein zur Akzentfarbe passendes Grau
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	Ecken aller Komponenten
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	Größenverhältnis von Schrift, Abständen und Komponenten
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	Ob Flächen wie Karten oder Menüs durchscheinen
`has_background`	`True` / `False`	`True`	Ob der Theme-Bereich eine Hintergrundfarbe bekommt
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	Heller · dunkler Modus. Nur auf App-Ebene (siehe unten)
`default_open` (theme_panel)	`True` / `False`	`False`	Theme-Panel geöffnet starten

Theme für die ganze App

Die offizielle Doku erklärt es mit rx.App(theme=rx.theme(...)), in Reflex 0.10 gilt dieses Argument aber als „alte Abkürzung“, und der offizielle Ort ist RadixThemesPlugin(theme=...) in rxconfig.py. Auch diese Website setzt so accent_color="indigo", gray_color="slate" und radius="large". Da sich dabei die ganze Website ändert, steht es hier nur als Code.

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

appearance im App-Theme legt den Standard-Farbmodus fest (hell · dunkel). In 0.10 wird ein appearance an einem rx.theme innerhalb der Seite beim Rendern verworfen, sodass sich damit nicht nur ein Teil abdunkeln lässt.

Nur einen Teil überschreiben

Das neue Theme gilt nur, wo du mit rx.theme umschließt; alles außerhalb behält das App-Theme. Nicht angegebene Props werden vom äußeren Theme geerbt. Stile wie padding direkt am rx.theme werden ignoriert, Abstände gibst du deshalb einer inneren rx.box.

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

Theme-Panel

rx.theme_panel() ist ein Theme-Editor, der oben rechts auf dem Bildschirm erscheint. Du klickst dich durch Farben und Ecken und überträgst die gewählten Werte dann ins rx.theme im Code. Es startet geschlossen, mit default_open=True geöffnet. Weil es das Theme der ganzen Website ändert, steht es auf dieser Seite nur als Code.

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

Auftrag erledigt

Nur die Bannerbox ist mit rx.theme umschlossen und auf Türkis, Pillenecken und ein etwas größeres Verhältnis umgestellt. callout und Button darin folgen dem Theme, ohne eigene Farbangabe.

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

Werkstattnotizen

Das App-Theme gehört in rxconfig.py: RadixThemesPlugin(theme=rx.theme(...)). rx.App(theme=) ist in 0.10 eine alte Abkürzung.
rx.theme in der Seite überschreibt nur den umschlossenen Teil. Nicht angegebene Werte werden geerbt.
accent_color · gray_color · radius · scaling · panel_background · has_background.
appearance nur auf App-Ebene. Stile am rx.theme werden ignoriert, also an die innere Box.
Mit rx.theme_panel() auswählen und die Werte in den Code übernehmen.

← Zurück

HTML-Elemente · SVG

Weiter →

Weitere Werkzeuge · Skeleton

Ü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