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%)' }])]`

5 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

ホストコンポーネントが公開するコアな CSS カスタムプロパティ。

変数	デフォルト	型	説明
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	表示されるスケルトン表面に使用されるベースのプレースホルダー色。
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	シマーグラデーションで使用されるハイライト色。
`--hub-skeleton-radius`	`12px`	length	block ノードおよび line ノードのデフォルトの角丸半径。
`--hub-skeleton-gap`	`12px`	length	修飾子で上書きされない場合に stack ノードおよび grid ノードで使用されるデフォルトのギャップ。
`--hub-skeleton-animation-duration`	`1.35s`	transition	シマーアニメーションサイクルの長さ。

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。