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

Skeleton

rx.skeleton

Offizielle Doku

Werkstattauftrag

Zeig während der 1–2 Sekunden, in denen die Profilkarte lädt, graue Platzhalter in derselben Größe, damit die Seite nicht springt.

rx.skeleton ist ein grauer Platzhalter, der an der Stelle erscheint, während Inhalt geladen wird. Umschließt er ein Kind, wird er zu einer pulsierenden Box in dessen Größe, und ist das Laden fertig, erscheint der echte Inhalt an genau derselben Stelle, sodass das Layout nicht wackelt. Ohne loading ist er im Platzhalterzustand.

rx.skeleton(rx.button("Loading button"))

Props ausprobieren

Schaltest du loading aus, verschwindet der Platzhalter, und der echte Inhalt erscheint. Ein rx.skeleton ohne Kind bekommt seine Größe über width·height.

Props ausprobieren

title

width

height

rx.vstack(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="RX", size="4"), loading=True),
        rx.box(
            rx.skeleton(rx.heading("Grace Hopper", size="3"), loading=True),
            rx.skeleton(rx.text("Posted two days ago.", size="2"), loading=True),
        ),
        rx.skeleton(rx.button("Follow"), loading=True),
        spacing="3",
        align="center",
    ),
    rx.skeleton(width="240px", height="24px", loading=True),
    spacing="4",
)

Solange loading an ist, lässt sich der Button darin nicht anklicken. Der Platzhalter hält die Größe des Kinds exakt ein, beim Ausschalten verschiebt sich also nichts.

Prop	Werte	Standard	Verwendung
`loading`	`True` / `False`	`True`	Platzhalter oder echten Inhalt zeigen
`width` `height`	CSS-Länge (auch responsiv)	Größe des Kinds	Größe des Platzhalters
`min_width` `max_width`	CSS-Länge	keiner	Minimal- · Maximalbreite
`min_height` `max_height`	CSS-Länge	keiner	Minimal- · Maximalhöhe

Größe und loading

Das Beispiel aus der offiziellen Doku. Bei den beiden Platzhaltern um die Buttons ist die Höhe per height geändert, die unteren zwei zeigen loading mit True und mit False.

Text is already loaded.

rx.vstack(
    rx.skeleton(rx.button("button-small"), height="10px"),
    rx.skeleton(rx.button("button-big"), height="20px"),
    rx.skeleton(rx.text("Text is loaded."), loading=True),
    rx.skeleton(rx.text("Text is already loaded."), loading=False),
)

Bei Text den Text selbst umschließen

Der Platzhalter für Text umschließt nicht das Elternelement, sondern den Text selbst. Umschließt du das Elternelement, wird dessen ganze Breite grau, umschließt du den Text, nur so viel, wie der Text tatsächlich lang ist. Du schreibst rx.text(rx.skeleton("...")).

Wrap the parent:

Wrap the text itself:

rx.vstack(
    rx.text("Wrap the parent:", size="1", color_scheme="gray"),
    rx.skeleton(rx.box(rx.text("Short text"), width="100%")),
    rx.text("Wrap the text itself:", size="1", color_scheme="gray"),
    rx.text(rx.skeleton("Short text")),
    width="300px",
)

Größe direkt angeben

Mit nur width·height und ohne Kind entsteht eine leere Platzhalterbox. So reservierst du vorab Platz für Zeilen, Bilder oder Icons, deren Inhalt noch nicht feststeht.

rx.vstack(
    rx.skeleton(width="240px", height="16px"),
    rx.skeleton(width="180px", height="16px"),
    rx.skeleton(width="100%", max_width="320px", height="80px"),
    rx.skeleton(width="48px", height="48px"),
    width="100%",
)

Auftrag erledigt

Ein Klick auf Reload lässt ein Background-Event loading einschalten, 1,5 Sekunden warten und wieder ausschalten. In dieser Zeit werden Avatar, Name und Vorstellung zu Platzhaltern in ihrer jeweiligen Größe. Die Vorstellung umschließt den Text innerhalb von rx.text, deshalb wird nur so viel grau, wie der Text lang ist.

Ada Lovelace

Wrote the first program.

import asyncio


class SkeletonProfileState(rx.State):
    loading: bool = False
    name: str = "Ada Lovelace"
    bio: str = "Wrote the first program."

    @rx.event(background=True)
    async def reload_profile(self):
        async with self:
            self.loading = True
        await asyncio.sleep(1.5)
        async with self:
            self.loading = False


rx.card(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="AL", size="5", radius="full"), loading=SkeletonProfileState.loading),
        rx.box(
            rx.skeleton(rx.heading(SkeletonProfileState.name, size="4"), loading=SkeletonProfileState.loading),
            rx.text(rx.skeleton(SkeletonProfileState.bio, loading=SkeletonProfileState.loading), size="2", color_scheme="gray"),
        ),
        spacing="4",
        align="center",
    ),
    rx.button(
        "Reload",
        on_click=SkeletonProfileState.reload_profile,
        disabled=SkeletonProfileState.loading,
        variant="soft",
        margin_top="12px",
    ),
    max_width="360px",
)

Werkstattnotizen

rx.skeleton(kind) wird zu einem grauen Platzhalter in genau der Größe des Kinds.
loading=False zeigt den echten Inhalt. Ohne Angabe Platzhalterzustand (True).
Bei Text nicht das Elternelement, sondern den Text selbst umschließen: rx.text(rx.skeleton("...")).
Ohne Kind reservieren width · height einen leeren Platz.
Im Platzhalterzustand lassen sich Buttons · Eingabefelder darin nicht bedienen.

← Zurück

Weitere Werkzeuge · Theme

Weiter →

Weitere Werkzeuge · Clipboard

Ü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