Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
进度条
Determinate progress with value labelsDocuments92% Images68% Videos34% Archives12%
Size scale
IndeterminateSyncing workspace
分级计量表
The caption beside each bar is plain text: it is not attached to the gauge, and a meter is named by its author alone. label is what a screen reader reads out — it renders nothing, so the demo looks the same with it and without it.
Primary storage40% used
Media library90% used
Battery reserve10% left
环形仪表
The projected caption is decoration, and so is the percentage in the middle: neither names a role="meter". label does, and it is the only way in — a ring used to announce itself as "92%", which says nothing about what was measured.
使用 mixin 和语义颜色进行主题化
Semantic colours — the primary70% success70% warning70% danger70% neutral70%
color input reads the design-system --hub-sys-color-* familiesCustom theme — one Coverage64% 86%Score
hub-metrics-theme() include retints all three primitives at once (see the CSS tab)