Angular 进度条、计量表与环形指标 | 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 |