Angular 骨架屏加载组件 | ng-hub-ui-skeleton
Angular 骨架屏加载占位符，提供可复用预设、内联 DSL 模板、响应式取值以及用于微光状态的 CSS 变量。
概览
团队为何搜索这个库
当加载状态需要保持系统化、可复用且产品就绪，而不是退化成一次性的微光标记时，请选择这个 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 0.1.0 - 4/14/26, 12:00 AM
added: Initial runtime skeleton library for Angular with bundled presets and a compact DSL parser.
added: Programmatic preset registration through dependency injection.
added: Responsive property values and compact preset variants.
added: Documentation page, overview content and live examples in the main ng-hub-ui site.