Angular 骨架屏加载组件 | ng-hub-ui-skeleton
Angular 骨架屏加载占位符，提供可复用预设、内联 DSL 模板、响应式取值以及用于微光状态的 CSS 变量。
最后更新 2026年8月17日
概览
团队为何搜索这个库
当加载状态需要保持系统化、可复用且产品就绪，而不是退化成一次性的微光标记时，请选择这个 Angular 骨架屏库。
安装
npm install ng-hub-ui-skeleton跳转到
适用于
- 卡片与信息流
- 数据表格
- 表单
- 仪表盘
关于 skeleton
ng-hub-ui-skeleton 为 Angular 团队提供了一种结构化的方式来设计加载占位符：为常见 UI 模式内置的预设、用于自定义形状的紧凑 DSL，以及能让同一套骨架屏适配多种布局的响应式取值。
功能指南
Preset 目录
内置目录刻意做得很宽泛，因为加载状态通常是重复出现的业务 UI，而非孤立的占位符。它包含 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。其理念是让团队从面向生产的加载词汇起步，而不是在每个功能里重建相同的 shimmer 块。实际上，这意味着表格密集的页面可以从 `table-toolbar` 加上重复的 `table-row` 起步，dashboard 页面可以混用 `stat-card`、`chart-panel` 和 `dashboard-widget`，而以内容为主的流程可以使用 `card`、`feed-item` 或 `search-result`，无需从零编写新的布局标记。
示例:
Preset Catalogue Gallery
Shows the bundled presets together so teams can choose the closest starting point before authoring custom templates.
card
Content card with media, title and body lines.
list-item
Compact row with avatar and text.
table-row
Tabular data row placeholder.
detail-view
Detail screen with media and metadata.
form-section
Form group with responsive fields.
dashboard-widget
Panel with chart or metric content.
stat-card
Quick KPI summary card.
chart-panel
Large chart region with legend rows.
profile-summary
Profile hero with avatar and stats.
master-detail
List and detail layout together.
kanban-card
Small board card loading state.
feed-item
Activity or timeline row.
search-result
Search result with metadata lines.
table-toolbar
Toolbar with title, filters and actions.
filter-bar
Row of filter controls.
empty-state-skeleton
Illustrative empty or onboarding state.
card
Dense card variant for tighter layouts.
代码
导入:
模板:
组件:
Bundled Card Preset
Renders the built-in card skeleton with the default shimmer appearance.
代码
导入:
模板:
组件:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
代码
导入:
模板:
组件:
紧凑的 DSL 编写
内联模板使用紧凑的类 Emmet 语法，因为该库为 Angular 代码库内的快速迭代做了优化。兄弟节点组合使用 `+`，嵌套使用 `>`，修饰符位于括号内，重复使用 `*N`，参数通过 `{{param}}` 插值。这为团队提供了一个紧凑的编写界面，在 pull request 中依然易读，并允许进行小改动而无需重写整棵对象树。关键不在于语法的巧妙，而在于布局意图始终贴近组件用法，并且便于 diff、重构和评审。
示例:
Compact DSL Patterns
Explains the core DSL building blocks with visual outputs for structure, params and responsive tokens.
Structure
`+` creates siblings and `>` nests children.
Params & repeats
Use {{param}} placeholders and *N repeaters to scale rows quickly.
Responsive values
Switch spacing or columns inline with compact breakpoint tokens.
代码
导入:
模板:
组件:
Inline Emmet-like Template
Defines a custom skeleton shape inline with params interpolation.
代码
导入:
模板:
组件:
变体与响应式布局
加载状态不应忽视布局密度或断点，因为当 skeleton 与真实 UI 毫无关联时用户会察觉到。Presets 可以暴露诸如 `compact` 的变体，单个修饰符的值也可以使用紧凑的响应式令牌在断点之间切换。这使得既能保留一份语义化的 skeleton 定义，又能在移动端、平板和桌面端环境中适配宽度、列数、间距和尺寸。实际效果是更少的重复模板，以及占位阶段与真实渲染界面之间更好的一致性。
示例:
Compact Variant
Compares the default card preset with its compact variant for denser interfaces.
代码
导入:
模板:
组件:
Responsive Table Layout
Uses responsive values inside the built-in presets to adapt from compact to wider layouts.
代码
导入:
模板:
组件:
编程式注册与主题
内置预设是起点，而非上限。团队可以通过 Angular 依赖注入注册项目专属的预设，并像使用内置目录一样按名称使用它们——当产品拥有自己重复出现的 skeleton 语言时，这一点至关重要。视觉调优保留在 CSS 变量中，因此 shimmer 强度、基础颜色、高亮颜色、间距和圆角都可以与 design system 对齐，而不会把硬编码的值泄漏到功能组件中。这种分离很重要：结构属于预设和 DSL，而视觉策略属于主题化。
示例:
Programmatic Custom Preset
Registers a local preset and consumes it by name just like the bundled catalogue.
代码
导入:
模板:
组件:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
代码
导入:
模板:
组件:
核心特性
最近更改
Version 22.2.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.2.1 - 7/28/26, 12:00 AM
added: Comprehensive test suite for the skeleton DSL parser and preset registry: full grammar coverage (node types, nesting, siblings, props, variants, multipliers, responsive tokens), every parser error path with its exact message, preset expansion/override/variant resolution, and component render round-trips. No runtime changes.
Version 22.2.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-skeleton/styles. The theme mixin now builds to dist/skeleton/styles/... (was dist/skeleton/src/lib/styles/...), so @use 'ng-hub-ui-skeleton/styles' resolves. Update any @use that reached into src/lib/styles.
Version 22.1.0 - 6/24/26, 12:00 AM
added: New hub-skeleton-theme() Sass mixin (styles/mixins/skeleton-theme) — theme the loading placeholders in one call: base / highlight surfaces (the shimmer gradient), corner radius, node gap and shimmer speed. Every parameter is optional and defaults to null, so only the ones you pass are emitted as --hub-skeleton-* overrides. Token-based, no Bootstrap dependency. (A skeleton is a neutral placeholder — there is no semantic colour variant; per-node sizes still come from the template DSL / presets.) The five theming tokens (--hub-skeleton-bg / -highlight / -radius / -gap / -animation-duration) are now documented in the design-token reference.
Version 22.0.0 - 6/17/26, 12:00 AM
changed: Aligned with Angular 22.
changed: README documentation standardized.
changed: Replaced the deprecated ngStyle directive with the native [style] binding (Angular soft-deprecated ngStyle/ngClass in November 2024 in favour of native bindings, for better performance and smaller bundles).
changed: Added the initial dynamic skeleton component for Angular.
changed: Added a compact Emmet-like DSL with preset composition and repeat support.
changed: Added responsive property values, variants, and programmatic preset registration.
changed: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.