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

Layout

Box

rx.box

Offizielle Doku

Werkstattauftrag

Bitte einen Hinweistext mit hellem Hintergrund und runden Ecken einfassen, damit er sich auf einen Blick vom Fließtext abhebt.

rx.box ist der grundlegendste Behälter. Als Blockelement auf Basis von HTMLs div dient er dazu, andere Komponenten zu gruppieren und der Gruppe einen Stil zu geben. Eigene Props hat Box nicht: Das Aussehen entsteht, indem du CSS-Eigenschaften wie Hintergrund, Abstände oder Rahmen als Keyword-Argumente übergibst.

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

Props ausprobieren

Das Aussehen einer Box wird komplett über CSS-Stileigenschaften festgelegt. In Python wird aus dem - im CSS-Namen ein _ (background-color → background_color).

Props ausprobieren

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

Ändere Hintergrund, Innenabstand, Rahmen, Ecken und Breite. Alles sind CSS-Eigenschaften, die Werte schreibst du also wie in CSS.

Prop	Werte	Standard	Verwendung
`width` `height`	CSS-Länge (`"200px"`, `"50%"`)	passt sich dem Inhalt an	Größe der Box
`padding` `margin`	CSS-Länge, auch aufgeteilt wie `padding_x` · `margin_top`	`0`	Innen- und Außenabstand
`background_color` `background`	Farbname, `var(--tomato-3)`, Verlauf, `url(…)`	keiner	Hintergrundfarbe oder -bild
`border` `border_radius`	`"1px solid var(--gray-7)"`, `"8px"`	keiner	Rahmen und Eckenrundung
`title`	Text	keiner	Tooltip beim Überfahren mit der Maus
`hidden` `role` `tab_index`	HTML-Attribute	keiner	Ausblenden, Barrierefreiheitsrolle, Tab-Reihenfolge
`on_click` `on_mouse_enter` …	Event-Handler	keiner	Standard-Events, die jede Komponente hat

Farben: CSS-Namen und Radix-Farben

Farben lassen sich auf drei Arten angeben: als CSS-Farbname wie "orange", als Radix-Farbvariable wie var(--tomato-3) (oder gleichbedeutend rx.color("plum", 3)) und als var(--accent-2), das der Akzentfarbe des Website-Themes folgt. Radix-Farben haben die Stufen 1 bis 12; je kleiner die Zahl, desto heller und desto eher für Hintergründe gedacht.

Das Beispiel der offiziellen Doku übergibt der letzten Box radius="full", aber Box hat keinen radius-Prop, deshalb bewirkt das nichts. Runde Ecken bekommst du mit border_radius.

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

Hintergrund: Verläufe und Bilder

Mit der einen CSS-Eigenschaft background legst du Verläufe oder Bilder unter. linear-gradient wechselt die Farbe entlang einer Linie, radial-gradient breitet sich von einem Punkt aus. Bilder setzt du mit url(…) ein, und center/cover füllt die Box von der Mitte aus vollständig.

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

Events und HTML-Attribute

Box hat die Standard-Events, die jede Komponente hat (on_click, on_mouse_enter, on_mouse_leave usw.). Fahr mit der Maus über die Box unten und klick darauf. Mit title erscheint ein Tooltip, wenn der Mauszeiger kurz stillsteht.

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

Auftrag erledigt

Heller Hintergrund und ein kräftiger linker Rand kennzeichnen den Hinweis, und der Innenabstand sorgt dafür, dass der Text nicht am Rand klebt.

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

Werkstattnotizen

rx.box ist ein Blockbehälter auf div-Basis. Damit gruppierst du und gibst Stil.
Eigene Props gibt es nicht. CSS-Eigenschaften wie width · padding · background_color · border_radius werden mit _-Namen übergeben.
Farben: CSS-Namen, var(--tomato-3) oder rx.color("tomato", 3), Themen-Akzentfarbe var(--accent-N).
Mit background allein legst du Verläufe (linear · radial) und url(…)-Bilder unter.
Standard-Events wie on_click · on_mouse_enter und HTML-Attribute wie title · hidden funktionieren ebenfalls.

← Zurück

Kursüberblick

Weiter →

Layout · Flex

Ü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