Angular 骨架屏加载组件 | ng-hub-ui-skeleton

Angular 骨架屏加载占位符,提供可复用预设、内联 DSL 模板、响应式取值以及用于微光状态的 CSS 变量。

交互式示例

探索实时示例,了解该库在常见 Angular 用例中的表现。

内置 card preset

Preset 目录展示

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.

内联的类 Emmet 模板

紧凑的 DSL 模式

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.

编程式自定义 preset

响应式表格布局

紧凑变体

Dashboard 组合