API-Referenz

Hier ist der vollständige Vertrag für skeleton: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle skeleton mit 7 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`preset`	`string \| null`	`null`	Name eines gebündelten oder registrierten Presets. Wenn angegeben, löst die Komponente Standardwerte, Varianten und Alias-Komposition aus der Preset-Registry auf.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	Inline-DSL-String im Emmet-Stil oder Template-Definitionsobjekt mit optionalen responsiven Breakpoint-Überschreibungen.
`params`	`HubSkeletonParams`	`{}`	Serialisierbare Parameter, die in `{{param}}`-Platzhalter interpoliert werden, bevor das Parsen und die Preset-Expansion erfolgen.
`variant`	`string \| null`	`null`	Optionaler Preset-Variantenname, wie z. B. `compact`, der verwendet wird, um Template-Standardwerte umzuschalten oder das Basis-Preset-Template zu überschreiben.
`animated`	`boolean`	`true`	Aktiviert oder deaktiviert die Shimmer-Animation, während dasselbe Platzhalter-Layout beibehalten wird.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	Ändert die visuelle Intensität der Skeleton-Flächen, ohne das aufgelöste Layout zu ändern.
`ariaLabel`	`string`	`'Loading placeholder'`	Barrierefreie Beschriftung, die auf das Container-Element für assistive Technologien angewendet wird.

Outputs

Noch keine Outputs dokumentiert.

Templates

Mach es zu deinem — 3 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`Bundled Presets`	Verfügbare Preset-Namen im anfänglichen Katalog: 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 und empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	Kompakte String-Syntax, die Knotennamen, Modifikatoren, Geschwister-Komposition mit `+`, Kind-Verschachtelung mit `>` und Wiederholung mit `*N` unterstützt.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	Registriert benutzerdefinierte Presets in der Angular-Dependency-Injection, sodass jede Komponente sie über ihren Namen rendern kann.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

CSS-Variablen

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

Visuelle tokens

Kern-CSS-Custom-Properties, die von der Host-Komponente bereitgestellt werden.

Variable	Standard	Typ	Beschreibung
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	Basis-Platzhalterfarbe, die für sichtbare Skeleton-Flächen verwendet wird.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	Hervorhebungsfarbe, die vom Shimmer-Verlauf verwendet wird.
`--hub-skeleton-radius`	`12px`	length	Standard-Eckenradius für Block- und Linienknoten.
`--hub-skeleton-gap`	`12px`	length	Standardabstand, der von Stack- und Grid-Knoten verwendet wird, wenn er nicht durch Modifikatoren überschrieben wird.
`--hub-skeleton-animation-duration`	`1.35s`	transition	Dauer des Shimmer-Animationszyklus.

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.