Метрики Angular: Progress, Meter и Ring | ng-hub-ui-metrics
Примитивы метрик Angular только для чтения — линейный индикатор прогресса, градуированный измеритель и круговой кольцевой измеритель — управляемые токенами дизайн-системы с полной семантикой ARIA.
Стили
Миксины и стили
Override the shared `--hub-progress-*`, `--hub-meter-*` and `--hub-ring-*` tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted as CSS custom properties, so the rest keep each component's own defaults. Token-based and self-contained (no Bootstrap dependency).
Theming with hub-metrics-theme
| Миксин | Параметры | Описание |
|---|---|---|
| Theming | ||
hub-metrics-theme() | $accent--hub-progress-accent--hub-ring-indicator$track--hub-progress-track-bg--hub-meter-track-bg--hub-ring-track$low--hub-meter-low-bg--hub-ring-low-color$optimum--hub-meter-optimum-bg$high--hub-meter-high-bg--hub-ring-high-color$radius--hub-progress-radius--hub-meter-radius | One-call theming for the metrics primitives |
CSS-переменные
Тематизируйте каждый пиксель с помощью 17 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Metrics
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-progress-track-bg | color-mix(in oklch, var(--hub-progress-accent) 16%, transparent) | color | Progress track background (subtle accent tint) |
--hub-progress-indicator-bg | var(--hub-progress-accent) | color | Filled progress indicator colour |
--hub-progress-height | var(--hub-ref-space-2, 0.5rem) | length | Progress bar thickness (sm/md/lg override it) |
--hub-progress-radius | var(--hub-ref-radius-pill, 50rem) | length | Progress bar corner radius |
--hub-meter-track-bg | color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent) | color | Meter track background |
--hub-meter-low-bg | var(--hub-sys-color-danger, #dc3545) | color | Meter fill when the value is below target |
--hub-meter-optimum-bg | var(--hub-sys-color-success, #198754) | color | Meter fill when the value is on target |
--hub-meter-high-bg | var(--hub-sys-color-warning, #ffc107) | color | Meter fill when the value is above target |
--hub-meter-height | var(--hub-ref-space-2, 0.5rem) | length | Meter bar thickness |
--hub-meter-radius | var(--hub-ref-radius-pill, 50rem) | length | Meter bar corner radius |
--hub-ring-size | 4rem | length | Ring outer diameter (overridden per-instance from size) |
--hub-ring-thickness | var(--hub-ref-space-2, 0.5rem) | string | Ring stroke width (overridden per-instance from thickness) |
--hub-ring-track | color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent) | color | Ring track stroke colour |
--hub-ring-indicator | var(--hub-sys-color-primary, #0d6efd) | color | Ring indicator stroke colour (neutral band) |
--hub-ring-caption-color | var(--hub-sys-text-primary, #212529) | color | Ring centre caption colour |
--hub-ring-low-color | var(--hub-sys-color-danger, #dc3545) | color | Ring stroke below the low threshold |
--hub-ring-high-color | var(--hub-sys-color-success, #198754) | color | Ring stroke at/above the high threshold |