Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。
API 参考
这里是 metrics 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 19 个输入项精细调校 metrics。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
hub-progress · value | number | 0 | 当前进度值，以 [0, max] 刻度表示。 |
hub-progress · max | number | 100 | 进度刻度的上限。 |
hub-progress · indeterminate | boolean | false | 为时长未知的工作呈现一个循环滚动的进度条；会去掉 aria-valuenow。 |
hub-progress · color | HubMetricsColor | 'primary' | 驱动指示器颜色的语义强调色，映射到 --hub-sys-color-* 令牌族。 |
hub-progress · size | HubProgressSize | 'md' | 控制进度条粗细的尺寸令牌（sm、md 或 lg）。 |
hub-progress · showValue | boolean | false | 是否在进度条旁边呈现取整后的百分比。 |
hub-progress · label | string | '' | 描述进度条所测量内容的无障碍标签。 |
hub-meter · value | number | 0 | 当前测量值，以 [min, max] 刻度表示。 |
hub-meter · min | number | 0 | 刻度的下限。 |
hub-meter · max | number | 1 | 刻度的上限。 |
hub-meter · low | number | undefined | undefined | “low”区域的上限；省略时默认为 min。 |
hub-meter · high | number | undefined | undefined | “high”区域的下限；省略时默认为 max。 |
hub-meter · optimum | number | undefined | undefined | 范围内的首选点；省略时默认为中点。 |
hub-ring · value | number | 0 | 分数值，以 0..1 的比率或 0..max 的数字表示。 |
hub-ring · max | number | 1 | 用于对数值进行归一化的上限。 |
hub-ring · size | number | string | '4rem' | 环的外径（数字按 px 处理，或任意 CSS 长度字符串）。 |
hub-ring · thickness | number | string | '0.5rem' | 环的描边宽度（数字按 px 处理，或任意 CSS 长度字符串）。 |
hub-ring · thresholds | HubRingThresholds | undefined | undefined | 可选的颜色阈值，按区段（low/high）为指示器重新着色。 |
hub-ring · showValue | boolean | true | 是否在中心呈现取整后的百分比。 |
输出
尚未记录任何输出项。
模板
打造你自己的样式——1 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
hub-ring · <ng-content> | 作为说明文字投影到环中心的内容，与内置百分比一并（或替代其）呈现。 | <hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring> |