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)