API リファレンス

skeleton の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

7 個のインプットで skeleton を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`preset`	`string \| null`	`null`	バンドル済みまたは登録済みのプリセットの名前。指定すると、コンポーネントはプリセットレジストリからデフォルト、バリアント、エイリアス合成を解決します。
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	インラインの Emmet 風 DSL 文字列、または任意のレスポンシブブレークポイント上書きを伴うテンプレート定義オブジェクト。
`params`	`HubSkeletonParams`	`{}`	解析およびプリセット展開の前に `{{param}}` プレースホルダーに補間される、シリアライズ可能なパラメータ。
`variant`	`string \| null`	`null`	`compact` などの任意のプリセットバリアント名。テンプレートのデフォルトを切り替えたり、ベースプリセットテンプレートを上書きしたりするために使用します。
`animated`	`boolean`	`true`	同じプレースホルダーレイアウトを保ちながら、シマーアニメーションを有効または無効にします。
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	解決済みのレイアウトを変えずに、スケルトン表面の視覚的な強度を変更します。
`ariaLabel`	`string`	`'Loading placeholder'`	支援技術のためにコンテナ要素に適用されるアクセシブルなラベル。

アウトプットはまだドキュメント化されていません。

自分好みに — 3 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`Bundled Presets`	初期カタログで利用可能なプリセット名: 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、empty-state-skeleton。	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	ノード名、修飾子、`+` による兄弟合成、`>` による子のネスト、`*N` による繰り返しをサポートするコンパクトな文字列構文。	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	任意のコンポーネントが名前でレンダリングできるよう、Angular の依存性注入にカスタムプリセットを登録します。	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`