Angular 骨架屏加载组件 | ng-hub-ui-skeleton
Angular 骨架屏加载占位符,提供可复用预设、内联 DSL 模板、响应式取值以及用于微光状态的 CSS 变量。
样式
混入与样式
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 | 微光动画循环的持续时间。 |