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-bgrgba(148, 163, 184, 0.18)color 用于可见骨架屏表面的基础占位颜色。
--hub-skeleton-highlightrgba(255, 255, 255, 0.52)color 微光渐变所使用的高亮颜色。
--hub-skeleton-radius12pxlength block 和 line 节点的默认边框圆角。
--hub-skeleton-gap12pxlength 当未被修饰符覆盖时,stack 和 grid 节点使用的默认间距。
--hub-skeleton-animation-duration1.35stransition 微光动画循环的持续时间。