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

Container

rx.container

Offizielle Doku

Werkstattauftrag

Bitte die Textbreite auf ein gut lesbares Maß begrenzen, damit sich der Text auf breiten Monitoren nicht endlos zur Seite ausdehnt.

rx.container begrenzt die maximale Breite seines Inhalts und lässt links und rechts den übrigen Platz frei, sodass der Inhalt in der Mitte steht. Ist der Bildschirm schmaler als die Maximalbreite, wird auch der Inhalt schmaler, deshalb eignet sich Container gut für responsive Seiten. Meist umschließt er den gesamten Inhaltsbereich einer Seite.

This content is at most 448px wide.

rx.box(
    rx.container(
        rx.card("This content is at most 448px wide.", width="100%"),
        size="1",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Props ausprobieren

Der graue Hintergrund ist der äußere Bereich, die Karte liegt im Container. Weil dieses Vorschaufeld schmal ist, scheinen size 3 und 4 das ganze Feld zu füllen.

Props ausprobieren

Page content

size

padding

rx.box(
    rx.container(
        rx.card("Page content", width="100%"),
        size="1",
        padding="16px",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Je größer size, desto breiter darf der Inhalt maximal werden. padding ist der Innenabstand (16px), den Reflex standardmäßig setzt.

Prop	Werte	Standard	Verwendung
`size`	`"1"` (448px) `"2"` (688px) `"3"` (880px) `"4"` (1136px)	`"3"`	Maximale Breite des Inhalts
`padding`	CSS-Länge	`"16px"`	Innenabstand. Wird von Reflex' `create` standardmäßig gesetzt
`stack_children_full_width`	`True` / `False`	`False`	Innere vstacks · hstacks und Kinder wie deren Eingabefelder auf 100 % Breite

size kann mit rx.breakpoints(...) je nach Bildschirmbreite unterschiedlich sein. padding und stack_children_full_width sind keine Radix-Props, sondern Argumente, die rx.container in der installierten Version 0.10 zusätzlich anbietet.

Vier Größen

Das Beispiel aus der offiziellen Doku. Jeder Container wird innerhalb der äußeren Breite nur bis zu seiner eigenen Maximalbreite breit und steht in der Mitte.

size 1: max 448px

size 2: max 688px

size 3: max 880px

size 4: max 1136px

rx.box(
    rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
    rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
    rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
    rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
    background_color="var(--gray-3)",
    width="100%",
)

Innere Stacks auf volle Breite ziehen

Ein Stack setzt seine Kinder standardmäßig auf align="start", Eingabefelder sind also nur so breit wie nötig. Mit stack_children_full_width=True bekommen die Stacks im Container sowie ihre direkten Kinder vom Typ div · input · select · textarea · table 100 % Breite. Buttons (button-Elemente) sind davon ausgenommen. Links der Standard, rechts eingeschaltet.

rx.flex(
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        background_color="var(--gray-3)",
    ),
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        stack_children_full_width=True,
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

Größe je nach Bildschirmbreite

Soll der Inhalt auf dem Handy schmal und auf breiten Bildschirmen breiter gefasst sein, übergibst du size ein rx.breakpoints.

1 on phones, 2 from md, 3 from lg

rx.box(
    rx.container(
        rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
        size=rx.breakpoints(initial="1", md="2", lg="3"),
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Auftrag erledigt

Ein Artikel ist mit size="2" (maximal 688px) gefasst. Auch auf breiten Monitoren werden die Zeilen nicht zu lang, und der Text bleibt angenehm lesbar.

Notes from the workshop

Posted on Monday

A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.

The container keeps this column narrow on wide screens.

rx.box(
    rx.container(
        rx.vstack(
            rx.heading("Notes from the workshop", size="6"),
            rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
            rx.text(
                "A long line of text is hard to read. "
                "Keeping the column narrow helps the eye find the next line.",
            ),
            rx.text("The container keeps this column narrow on wide screens."),
            spacing="3",
        ),
        size="2",
        padding_y="24px",
    ),
    background_color="var(--gray-2)",
    width="100%",
)

Werkstattnotizen

rx.container begrenzt die maximale Breite des Inhalts und zentriert ihn. Damit umschließt du den Inhalt einer Seite.
size "1" bis "4" = 448 · 688 · 880 · 1136px. Standard ist "3".
Reflex setzt standardmäßig padding="16px". Bei Bedarf ändern.
Mit stack_children_full_width=True bekommen innere Stacks und Kinder wie Eingabefelder 100 % Breite (Buttons ausgenommen).
Die Größe lässt sich je nach Bildschirmbreite ändern, etwa mit size=rx.breakpoints(initial="1", lg="3").

← Zurück

Layout · Grid

Weiter →

Layout · Section

Ü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