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 组合