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	微光动画循环的持续时间。

尚未记录任何样式示例。本节将包含自定义方案和主题示例。