Skeleton
Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise
Beispiele
Text (3 Zeilen)
Block groß
Kreis (Avatar-Platzhalter)
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| variant | string: text | block | circle | "text" | Variante |
| lines | number | 3 | Zeilen (bei Text) |
| size | string: sm | md | lg | "md" | Größe (Block/Kreis) |
| shimmer | boolean | true | Schimmer-Animation |
* Pflicht-Prop
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--skeleton-border-subtle | var(--color-border-subtle) |
--skeleton-radius-full | var(--radius-full) |
--skeleton-radius-sm | var(--radius-sm) |
--skeleton-radius-surface | var(--radius-surface) |
--skeleton-surface-sunken | var(--color-surface-sunken) |
--skeleton-text-default | var(--color-text-default) |
Genutzte Design-Tokens
color.border.subtlecolor.surface.sunkencolor.text.defaultduration.sloweasing.standardradius.fullradius.smradius.surfacesize.10size.12size.24size.3size.40size.8