Angular スケルトンローダーコンポーネント | ng-hub-ui-skeleton
再利用可能なプリセット、インライン DSL テンプレート、レスポンシブな値、シマー状態向けの CSS 変数を備えた Angular のスケルトン読み込みプレースホルダー。
スタイル
ミックスインとスタイル
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
| ミックスイン | パラメータ | 説明 |
|---|---|---|
| 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 変数
5 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。
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.
| 変数 | デフォルト | 型 | 説明 |
|---|---|---|---|
--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 | シマーアニメーションサイクルの長さ。 |