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

Inset

rx.inset

Offizielle Doku

Werkstattauftrag

Bitte oben in die Produktkarte ein Foto setzen, das bis an den Kartenrand reicht.

rx.inset gibt seinem Inhalt einen negativen Außenabstand und breitet ihn so über den Innenabstand des umgebenden Behälters hinweg bis an den Rand aus. In einer Card füllt ein Bild dadurch die Karte von Rahmen zu Rahmen. Du brauchst das, wenn Inhalte am Rand abschließen sollen, etwa ein Foto oben oder eine Karte unten in einer Card.

A river between the hills, seen from above.

rx.card(
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="top",
        pb="current",
    ),
    rx.text("A river between the hills, seen from above."),
    width="280px",
)

Props ausprobieren

In der Karte steckt nur ein Bild, und du änderst side. side wählt den Rand, an dem der Inhalt abschließt. Bei top wird nach oben und zu beiden Seiten ausgedehnt, bei left nach links sowie oben und unten; nur auf der Gegenseite (unten bzw. rechts) bleibt der Kartenabstand. x dehnt nur links und rechts aus, y nur oben und unten. Je größer das size der Karte, desto größer der Innenabstand und desto deutlicher der Unterschied.

side ist die Seite, zu der bis an den Rand ausgedehnt wird, clip die Grenze, an der abgeschnitten wird. Bei einer classic-Karte entscheidet clip, ob der Rahmen überdeckt wird.

Prop	Werte	Standard	Verwendung
`side`	`"top"` `"bottom"` `"left"` `"right"` `"x"` `"y"`	alle vier Seiten	Rand, an dem der Inhalt abschließt. top heißt oben und beide Seiten, x nur links/rechts, y nur oben/unten
`clip`	`"border-box"` `"padding-box"`	`"border-box"`	Bis zur Außenkante des Rahmens füllen oder nur bis zu seiner Innenseite
`p` `px` `py` `pt` `pr` `pb` `pl`	`"current"` `"0"`	keiner	Innenabstand des Inset. current übernimmt den Innenabstand des Elternelements

Jeder Prop kann mit rx.breakpoints(...) je nach Bildschirmbreite einen anderen Wert bekommen. Radix Themes akzeptiert auch side="all", die installierte Version 0.10 wirft bei "all" aber einen Fehler. Um alle vier Seiten auszudehnen, lässt du side einfach weg.

Nach unten: side="bottom"

side="bottom" dehnt nach unten und zu beiden Seiten aus. Schließt der Inhalt an einem Rand ab, setzt du den Innenabstand der Gegenseite am besten auf "current". Dann hält die Seite, die nicht bis zum Rand reicht, den ursprünglichen Kartenabstand. Unten folgt das Bild auf den Text, wird nach unten ausgedehnt und bekommt oben pt="current".

The inset below uses a bottom side.

rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="bottom",
        pt="current",
    ),
    width="280px",
)

Nach links und rechts

side="right" oder "left" nutzt du, wenn Text und Bild nebeneinander stehen sollen. Dazu muss der Karteninhalt als Flex mit direction="row" aufgebaut sein. Auf der Bildseite setzt du den Abstand der Gegenseite (pl bzw. pr) auf "current".

This inset uses a right side.

This inset uses a left side.

rx.flex(
    rx.card(
        rx.flex(
            rx.text("This inset uses a right side."),
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="right",
                pl="current",
            ),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    rx.card(
        rx.flex(
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="left",
                pr="current",
            ),
            rx.text("This inset uses a left side."),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    spacing="4",
    wrap="wrap",
)

Wozu der current-Abstand dient

Steht Text direkt unter einem nach oben ausgedehnten Inset, klebt er standardmäßig am Bild. Mit pb="current" entsteht dazwischen eine Lücke, so groß wie der Innenabstand der Karte. Es gibt zwei Werte: "current" und "0".

No pb: text touches the box.

pb=current: same gap as the card padding.

rx.flex(
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
        rx.text("No pb: text touches the box."),
        width="200px",
    ),
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
        rx.text("pb=current: same gap as the card padding."),
        width="200px",
    ),
    spacing="4",
    wrap="wrap",
)

Auftrag erledigt

Das Foto reicht bis zum oberen Rand, und pb="current" hält passenden Abstand zum Produktnamen. Der übrige Inhalt bleibt wie gewohnt innerhalb des Kartenabstands.

Blue mug

$18

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.heading("Blue mug", size="3"),
    rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
    rx.button("Add to cart", width="100%"),
    width="240px",
)

Werkstattnotizen

rx.inset dehnt Inhalte mit negativem Abstand bis an den Rand des Elternelements (meist einer Card) aus.
side ist der Rand, an dem der Inhalt abschließt: top (oben + beide Seiten) · bottom · left · right · x (links/rechts) · y (oben/unten). Ohne Angabe alle vier Seiten (in 0.10 ist "all" ein Fehler).
Wird nur eine Seite ausgedehnt, setzt du den Abstand der Gegenseite (pb · pt · pl · pr) auf "current" und behältst so den Kartenabstand.
Für left · right muss der Karteninhalt ein Flex mit direction="row" sein.
clip: border-box (bis einschließlich Rahmen) · padding-box (bis zur Innenseite des Rahmens).

← Zurück

Layout · Card

Weiter →

Layout · Aspect Ratio

Ü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