Stat
stat指标卡 · KPI 数值/标签/升降趋势(无图表库)
用法
基础用法
传入 label 与 value 即成一张 KPI 指标卡。
注册用户
8,021
tsx
<Stat label="注册用户" value="8,021" />环比趋势
delta>=0 升（text-primary）/ <0 降（text-danger），配 deltaLabel 说明口径。
本月 GMV
¥128,400
+12.5%较上月
退款率
2.3%
-4.1%较上月
tsx
<>
<Stat label="本月 GMV" value="¥128,400" delta={12.5} deltaLabel="较上月" />
<Stat label="退款率" value="2.3%" delta={-4.1} deltaLabel="较上月" />
</>带图标
icon 插槽渲染在右上角，弱化为 muted 色。
本月 GMV
¥128,400
+12.5%较上月
tsx
<Stat
label="本月 GMV"
value="¥128,400"
delta={12.5}
deltaLabel="较上月"
icon={<Activity className="size-4" />}
/>网格排布
多张指标卡可直接用网格布局拼成看板。
注册用户
8,021
+5.2%较上月
订单数
1,204
-2.1%较上月
tsx
<div className="grid grid-cols-2 gap-4">
<Stat label="注册用户" value="8,021" delta={5.2} deltaLabel="较上月" icon={<Users className="size-4" />} />
<Stat label="订单数" value="1,204" delta={-2.1} deltaLabel="较上月" icon={<ShoppingCart className="size-4" />} />
</div>何时用
仪表盘里展示单个 KPI 指标卡：标签 + 数值 + 环比升降 + 可选图标/sparkline 插槽。要纯文本格式化数值（千分位/前后缀/倒计时）而非整张卡用 Statistic；要画趋势曲线/分布用 Chart；要表达占比量条用 Meter。
导入
ts
import { Stat } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| delta | number | — | 环比百分比，>=0 升(text-primary) / <0 降(text-danger)；不传则不渲染趋势 |
| …HTMLAttributes | HTMLAttributes<HTMLDivElement> | — | 透传 div 原生属性（含 className） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label* | ReactNode | 指标标签 |
| value* | ReactNode | 指标数值（自行格式化好的字符串/节点） |
| deltaLabel | ReactNode | 趋势旁说明文案（如「较上月」） |
| icon | ReactNode | 角标图标 |
| chart | ReactNode | 图表插槽（如 KPI 趋势 sparkline），渲染在数值行下方、delta 上方 |
禁忌 / 坑
暂无已知坑。delta 不传则整块趋势不渲染；正负号由数值符号决定颜色，无需自己加箭头。value 不做格式化，需自己传格式化后的内容（要自动千分位/前后缀走 Statistic）。
相关
Statistic · Chart · Meter · Timeline · NumberTicker · WorldMap
Playground
本月 GMV
¥128,400
+12%较上月
<Stat label="本月 GMV" value="¥128,400" delta={12} deltaLabel="较上月" />