Meter
meter用语义化的量条表示某个值在已知范围里的占比
用法
基础用法
传入 value 即渲染度量条（默认 0–100），role=meter 表达静态量占比。
tsx
<Meter value={64} />标签与数值
label 与 showValue 在轨道上方显示说明与格式化数值。
磁盘用量
tsx
<Meter value={72} label="磁盘用量" showValue />自定义量程
min/max 自定上下限，数值按区间换算占比。
评分
tsx
<Meter value={3.6} min={0} max={5} label="评分" showValue />绝对数表述
formatValue 接管数值文案，可见文字与读屏念到的 aria-valuetext 是同一句，不会各说各的。
已挂教材章节
tsx
<Meter
value={1041}
max={1324}
label="已挂教材章节"
showValue
formatValue={({ value, max }) => `${value} / ${max} 道题`}
/>不同占比
占比由 value 决定，宽度由 Base UI 内部自算。
电量
完成度
tsx
<>
<Meter value={18} label="电量" showValue />
<Meter value={100} label="完成度" showValue />
</>何时用
展示一个静态量在区间内的占比（磁盘用量、电量、配额）。区别于 Progress：Progress 表达「任务推进进度（会动）」，Meter 表达「此刻某个量占满量的多少」。语义上是 role="meter"。
导入
ts
import { Meter } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value* | number | - | 当前值 |
| min | number | 0 | 下限 |
| max | number | 100 | 上限 |
| showValue | boolean | false | 是否显示数值文案。默认按 (value - min) / (max - min) 渲染成百分比，与指示条同口径（最多一位小数） |
| formatValue | (info: { value, min, max, percent }) => string | - | 自定义数值文案。返回值同时用于可见文字与 aria-valuetext，两者不会不一致。percent 已归一并夹到 0-100（未取整）。用于绝对数表述：({ value, max }) => \${value} / ${max} 道题\`` |
| className | string | - | 透传类名（宽度在此设，如 w-64） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label | ReactNode | 标签（如「磁盘用量」）。这是给 `role="meter"` 挂无障碍名的唯一途径（内部走 aria-labelledby 关联），不传就是一条读屏无名的度量条 —— 自绘一行标题不算 |
禁忌 / 坑
表达「会推进的任务进度」请用 Progress 而非 Meter；条宽由父容器决定，记得给宽度。
- 无障碍名只能由 `label` 给。
role="meter"内部靠aria-labelledby关联到label，自己在组件外面写一行标题不会被关联上。 - 按 `textContent` 断言时会多出一个 `x`。Base UI 的 Meter.Root 末尾固定塞了一个
role="presentation"的视觉隐藏<span>x</span>（读屏不会念，也不进无障碍名）。要精确断言可见文案请查具体节点，别整树取textContent。 - `value` 超出 `[min, max]` 时文案会夹到 0-100%，但
aria-valuenow仍如实上报原始值 —— 越界应当在数据侧解决，组件不替你掩盖。
相关
Stat · Statistic · Chart · Timeline · NumberTicker · WorldMap
Playground
用量
<Meter value={64} label="用量" showValue />