Référence API

Voici le contrat complet de skeleton : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.

Inputs

Réglez skeleton à votre goût avec 7 inputs. Liez-les comme n’importe quel @Input Angular.

Nom	Type	Par défaut	Description
`preset`	`string \| null`	`null`	Nom d'un preset fourni ou enregistré. Lorsqu'il est fourni, le composant résout les valeurs par défaut, les variants et la composition d'alias à partir du registre de presets.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	Chaîne DSL inline de type Emmet ou objet de définition de modèle avec des remplacements de breakpoint responsives optionnels.
`params`	`HubSkeletonParams`	`{}`	Paramètres sérialisables interpolés dans les espaces réservés `{{param}}` avant l'analyse et l'expansion du preset.
`variant`	`string \| null`	`null`	Nom de variant de preset optionnel, tel que `compact`, utilisé pour changer les valeurs par défaut du modèle ou remplacer le modèle de preset de base.
`animated`	`boolean`	`true`	Active ou désactive l'animation shimmer tout en conservant la même mise en page de l'espace réservé.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	Modifie l'intensité visuelle des surfaces du skeleton sans changer la mise en page résolue.
`ariaLabel`	`string`	`'Loading placeholder'`	Libellé accessible appliqué à l'élément conteneur pour les technologies d'assistance.

Outputs

Aucun output documenté pour le moment.

Templates

Faites-le vôtre — 3 emplacements de template vous permettent de projeter votre propre balisage.

Nom	Description	Exemple
`Bundled Presets`	Noms de presets disponibles dans le catalogue initial : card, list-item, table-row, detail-view, form-section, dashboard-widget, stat-card, chart-panel, profile-summary, master-detail, kanban-card, feed-item, search-result, table-toolbar, filter-bar et empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	Syntaxe de chaîne compacte qui prend en charge les noms de nœuds, les modificateurs, la composition de frères avec `+`, l'imbrication d'enfants avec `>` et la répétition avec `*N`.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	Enregistre des presets personnalisés dans l'injection de dépendances d'Angular afin que n'importe quel composant puisse les rendre par leur nom.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

Variables CSS

Personnalisez chaque pixel avec 5 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Tokens visuels

Propriétés CSS personnalisées principales exposées par le composant hôte.

Variable	Par défaut	Type	Description
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	Couleur de base de l'espace réservé utilisée pour les surfaces visibles du skeleton.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	Couleur de surbrillance utilisée par le dégradé shimmer.
`--hub-skeleton-radius`	`12px`	length	Rayon de bordure par défaut pour les nœuds block et line.
`--hub-skeleton-gap`	`12px`	length	Espacement par défaut utilisé par les nœuds stack et grid lorsqu'il n'est pas remplacé par des modificateurs.
`--hub-skeleton-animation-duration`	`1.35s`	transition	Durée du cycle d'animation shimmer.

Styles et theming

Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.