Skeleton
Platzhaltergrafik, die den Platz des Inhalts einnimmt, solange dieser lädt — mit einer schimmernden Animation.
Nimm es, wenn du einen schimmernden Platzhalterbalken brauchst, der den Platz für Inhalt freihält, solange er lädt. Gib dem Elternelement von
<r-skeleton>die Maße des echten Inhalts und tausche es aus, sobald die Daten da sind.
Schnellstart
Grundlegende Verwendung
Das Skeleton füllt die Breite seines Elternelements und ist standardmäßig 16px hoch.
<r-skeleton></r-skeleton>Die Breite folgt dem Elternelement
Da das Skeleton width: 100% ist, steuerst du seine Länge über die Größe des Containers, in dem es liegt.
<div style="width: 100px">
<r-skeleton></r-skeleton>
</div>
<div style="width: 200px">
<r-skeleton></r-skeleton>
</div>
<div style="width: 100%">
<r-skeleton></r-skeleton>
</div>Platzhalter stapeln
Setze mehrere Skeletons zusammen, um einen Textblock oder einen Absatz nachzubilden.
<div style="display: flex; flex-direction: column; gap: 12px">
<r-skeleton></r-skeleton>
<r-skeleton></r-skeleton>
<r-skeleton></r-skeleton>
</div>API-Referenz
Eigenschaften
| Eigenschaft | Typ | Standard | Beschreibung |
|---|---|---|---|
sheet |
string |
'' |
CSS, das für gekapselte Überschreibungen ins Shadow DOM injiziert wird |
Eigenes Styling sheet
Übergib über sheet eine CSS-Zeichenkette, um das Aussehen des Skeletons in seinem Shadow DOM zu überschreiben.
<r-skeleton sheet=".ran-skeleton { height: 40px; border-radius: 20px; }"></r-skeleton>CSS-Variablen
Für Theming ohne sheet stellt das Skeleton außerdem CSS-Custom-Properties bereit:
| Variable | Standard | Beschreibung |
|---|---|---|
--ran-skeleton-height |
16px |
Höhe des Platzhalterbalkens |
--ran-skeleton-background |
var(--ran-gray-alpha-200, …) |
Grundfarbe ohne Schimmer |
--ran-skeleton-border-radius |
var(--ran-radius-sm, 6px) |
Eckenradius |
--ran-skeleton-shimmer-background |
linear-gradient(90deg, …) |
Verlauf des wandernden Glanzes |
--ran-skeleton-shimmer-animation-duration |
1.4s |
Dauer eines Schimmerdurchlaufs |
<r-skeleton style="--ran-skeleton-height: 32px; --ran-skeleton-border-radius: 16px"></r-skeleton>Events
Keine. Das Skeleton löst keine eigenen Events aus.
Slots
Keine. Das Skeleton zeichnet nur seinen eigenen Balken und projiziert keinen Slot-Inhalt.
Bewährte Praxis
- Am Layout ausrichten: Gib dem Elterncontainer solche Maße, dass jedes Skeleton die Breite des echten Inhalts hat, für den es steht.
- Die Form nachbilden: Stapele mehrere Skeletons mit gleichmäßigen Abständen, um mehrzeiligen Text oder Listenzeilen darzustellen.
- Über Variablen gestalten: Nimm für einfache Anpassungen die CSS-Variablen
--ran-skeleton-*; greife nur dann zusheet, wenn du Selektoren brauchst, die die Variablen nicht abdecken. - Beim Laden austauschen: Ersetze die Skeletons durch echten Inhalt, sobald die Daten eintreffen, statt sie endlos weiteranimieren zu lassen.