Angular Progress, Meter & Ring | ng-hub-ui-metrics
Schreibgeschützte Angular-Metrik-Primitive — ein linearer Fortschrittsbalken, ein abgestufter Meter und eine kreisförmige Ringanzeige —, angetrieben von Design-System-Token mit vollständiger ARIA-Semantik.
Interaktive Beispiele
Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.
Fortschrittsbalken
Abgestufte Meter
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.
Ringanzeigen
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.
Theming mit dem Mixin und semantischen Farben
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)