Angular Skeleton-Loader-Komponente | ng-hub-ui-skeleton

Angular Skeleton-Ladeplatzhalter mit wiederverwendbaren Presets, Inline-DSL-Templates, responsiven Werten und CSS-Variablen für Shimmer-Zustände.

Stile

Mixins und Stile

Override the `--hub-skeleton-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).

Theming with hub-skeleton-theme
MixinParameterBeschreibung
Theming
hub-skeleton-theme()
$bg--hub-skeleton-bg
$highlight--hub-skeleton-highlight
$radius--hub-skeleton-radius
$gap--hub-skeleton-gap
$animation-duration--hub-skeleton-animation-duration
One-call theming for `<hub-skeleton>`

CSS-Variablen

Gestalte jedes Pixel mit 5 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Skeleton

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

VariableStandardTypBeschreibung
--hub-skeleton-bgrgba(148, 163, 184, 0.18)color Basis-Platzhalterfarbe, die für sichtbare Skeleton-Flächen verwendet wird.
--hub-skeleton-highlightrgba(255, 255, 255, 0.52)color Hervorhebungsfarbe, die vom Shimmer-Verlauf verwendet wird.
--hub-skeleton-radius12pxlength Standard-Eckenradius für Block- und Linienknoten.
--hub-skeleton-gap12pxlength Standardabstand, der von Stack- und Grid-Knoten verwendet wird, wenn er nicht durch Modifikatoren überschrieben wird.
--hub-skeleton-animation-duration1.35stransition Dauer des Shimmer-Animationszyklus.