Angular のプログレス、メーター、リングメトリクス | ng-hub-ui-metrics
読み取り専用の Angular メトリクスプリミティブ — リニアプログレスバー、段階付きメーター、円形リングゲージ — デザインシステムトークンで駆動され、完全な ARIA セマンティクスを備えています。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
プログレスバー
Determinate progress with value labelsDocuments92% Images68% Videos34% Archives12%
Size scale
IndeterminateSyncing workspace
段階付きメーター
Primary storage40% used
Media library90% used
Battery reserve10% left
リングゲージ
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)