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

Card

rx.card

Offizielle Doku

Werkstattauftrag

Bitte auf der Startseite des Blogs für jeden Beitrag eine Karte mit Titel und Zusammenfassung anlegen; ein Klick auf die Karte soll zum Beitrag führen.

rx.card ist ein Behälter, der zusammengehörige Inhalte zu einem Block bündelt. Er ähnelt Box, hat aber einen Rahmen, folgt den Farben und der Eckenrundung des Themes und legt mit size den Innenabstand in Radix-Stufen ("1" bis "5") fest. So bekommst du mit weniger Stilangaben als bei Box ein Aussehen, das zum Theme passt.

Basic Card

rx.card("Basic Card")

Props ausprobieren

Mit wachsendem size werden Innenabstand und Eckenrundung gemeinsam größer. Mit variant änderst du die Wirkung von Rahmen und Hintergrund.

Props ausprobieren

Post title

A short summary of the post.

title

size

variant

width

rx.card(
    rx.heading("Post title", size="3"),
    rx.text("A short summary of the post.", size="2"),
    size="2",
    variant="surface",
    width="280px",
)

surface hat einen dezenten Rahmen, classic wirkt mit Schatten plastisch, ghost lässt ohne Rahmen nur den Abstand übrig.

Prop	Werte	Standard	Verwendung
`size`	`"1"` ~ `"5"`	`"1"`	Innenabstand und Eckenrundung
`variant`	`"surface"` `"classic"` `"ghost"`	`"surface"`	Wirkung von Rahmen und Hintergrund
`as_child`	`True` / `False`	`False`	Statt der Karte wird das Kind-Element (Link, Button) in Kartenform gerendert

size kann mit rx.breakpoints(...) je nach Bildschirmbreite unterschiedlich sein. Weitere Größen und Abstände gibst du wie bei Box über CSS-Eigenschaften an.

Fünf Größen

Das Beispiel aus der offiziellen Doku. Bei gleichem Text wird die Karte mit wachsendem size immer großzügiger.

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)

Drei Varianten

Im Fließtext der offiziellen Doku gibt es dafür kein Beispiel, aber in der Prop-Tabelle steht variant. Es gibt das standardmäßige surface, das plastische classic und das rahmenlose ghost. ghost nimmst du, wenn du nur die Abstandsregeln der Karte übernehmen willst.

surface

classic

ghost

rx.flex(
    rx.card("surface", variant="surface"),
    rx.card("classic", variant="classic"),
    rx.card("ghost", variant="ghost"),
    spacing="4",
    wrap="wrap",
)

Als anderes Element rendern: as_child

Mit as_child=True wird nicht die Karte selbst gerendert, sondern das direkte Kind-Element in Kartenform. Ist das Kind ein Link, wird die ganze Karte zu einem klickbaren Link. Das ist bei Links und Buttons üblich. Ein Klick auf die Karte unten öffnet die Reflex-Doku in einem neuen Tab.

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
            rx.box(
                rx.heading("Quick Start", as_="h2", size="3"),
                rx.text("Get started with Reflex in 5 minutes."),
            ),
            spacing="2",
        ),
        href="https://reflex.dev/docs/getting-started/introduction/",
        is_external=True,
    ),
    as_child=True,
)

Mit Inset bis an den Rand

Soll ein Bild in der Karte bis an den Rahmen reichen, umschließt du es mit rx.inset. Es wird um den Innenabstand nach außen gezogen und schließt am Rand ab. Mehr dazu auf der Seite Inset.

Fresh strawberries, picked this morning.

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.text("Fresh strawberries, picked this morning."),
    width="260px",
)

Auftrag erledigt

Jeder Beitrag bekommt eine Karte, und as_child=True macht die ganze Karte zum Link. Das Bild oben füllt dank rx.inset die Fläche bis zum Rand. Beim Link entfernt underline="none" die Unterstreichung.

Glazing basics

How to mix your first glaze.

Kiln care

Keep your kiln clean and safe.

rx.flex(
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Glazing basics", size="3"),
                rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Kiln care", size="3"),
                rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    spacing="4",
    wrap="wrap",
)

Werkstattnotizen

rx.card ist ein Bündelbehälter mit Rahmen und Theme-Optik.
size "1" bis "5" bestimmt Abstand und Rundung, variant surface · classic · ghost die Wirkung.
Mit as_child=True nimmt das Kind (Link · Button) die Kartenform an, und die ganze Karte wird klickbar.
Damit ein Bild bis an den Rand reicht, umschließt du es mit rx.inset.

← Zurück

Layout · Separator

Weiter →

Layout · Inset

Ü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