Meter
meter度量条 · Base UI role=meter(静态量占比，区别 Progress)
用法
基础用法
传入 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 />不同占比
占比由 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 | 是否显示格式化数值 |
| className | string | — | 透传类名（宽度在此设，如 w-64） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label | ReactNode | 可选标签（如「磁盘用量」） |
禁忌 / 坑
暂无已知坑。表达「会推进的任务进度」请用 Progress 而非 Meter；条宽由父容器决定，记得给宽度。
相关
Stat · Statistic · Chart · Timeline · NumberTicker · WorldMap
Playground
用量
<Meter value={64} label="用量" showValue />