Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。
API 参考
这里是 metrics 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 21 个输入项精细调校 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 | undefined | undefined | 驱动指示器颜色的可选强调色：单个词（语义名称、已注册强调色或 CSS 命名颜色）会映射到 --hub-sys-color-<name>，并以该词本身作为回退；字面值（#hex、rgb()、oklch()、var()…）则原样使用。设置后以内联样式应用；省略时由 --hub-progress-accent 令牌决定强调色。 |
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-meter · label | string | '' | 为量表命名的无障碍标签；role=meter 的名称只能由作者提供，缺少它量表就没有名称。 |
hub-ring · value | number | 0 | 分数值，以 0..1 的比率或 0..max 的数字表示。 |
hub-ring · max | number | 1 | 用于对数值进行归一化的上限。 |
hub-ring · size | number | string | undefined | undefined | 环的外径（数字按 px 处理，或任意 CSS 长度字符串），设置后以内联样式应用。省略时由 --hub-ring-size 令牌决定外径。 |
hub-ring · thickness | number | string | undefined | undefined | 环的描边宽度（数字按 px 处理，或任意 CSS 长度字符串），设置后以内联样式应用。省略时由 --hub-ring-thickness 令牌决定描边宽度。 |
hub-ring · thresholds | HubRingThresholds | undefined | undefined | 可选的颜色阈值，按区段（low/high）为指示器重新着色。 |
hub-ring · showValue | boolean | true | 是否在中心呈现取整后的百分比。 |
hub-ring · label | string | '' | 为环形量表命名的无障碍标签；投影的说明文字和中心百分比都无法为 role=meter 提供名称。 |
输出
尚未记录任何输出项。
模板
打造你自己的样式——1 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
hub-ring · <ng-content> | 投影到圆环中央作为说明文字的内容，与内置百分比并排显示（或取代它）。它只是装饰，而不是名称：role="meter" 元素的名称只能由作者给出，因此请传入 `label` 输入。 | <hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring> |