跳到主要内容

Stat 指标

一个关键数字加它的涨跌:仪表盘顶部的那排指标卡。一张卡只讲一个数。

基本用法

label 是指标名,value 是数值;delta 配合 trend 显示涨跌,hint 补充对比的基准。

本周活跃用户
12,480
上升12.5%较上周
平均响应时间
238 ms
下降18 ms较上周
转化率
3.2%
持平0.0%较上周

涨跌的好坏

默认“涨是好事”:涨绿跌红。错误率、响应时间这类指标反过来,传 positive="down"。箭头方向始终跟着 trend,颜色跟着好坏。

收入
¥86,200
上升8%
收入
¥71,900
下降9%
错误率
1.8%
上升0.6%
错误率
0.4%
下降0.3%

图标与无底变体

icon 放在指标名前面。variant="plain" 去掉卡片底,用来把几个指标并排放进同一张卡片。

下载量
48,210
上升320
订阅
2,934
本月新增 112
未处理工单
7

接口

属性

属性类型默认值说明
label*ReactNode—指标名。
value*ReactNode—数值。
deltaReactNode—涨跌幅文字,如“12.5%”“+320”。只传 delta 不传 trend 时按持平显示。
trend'up' | 'down' | 'flat'—涨 / 跌 / 持平,决定箭头方向。
positive'up' | 'down''up'哪个方向是好事。up:涨绿跌红;down:涨红跌绿。
hintReactNode—补充说明,如“较上周”。
iconReactNode—标签旁的图标。
variant'card' | 'plain''card'card:带卡片底;plain:没有底,放在别的容器里。

无障碍

  • 涨跌不只靠红绿:箭头方向是第二种提示,读屏还会在数字前读出“上升 / 下降 / 持平”。
  • 指标卡没有角色,按阅读顺序读出 指标名 → 数值 → 涨跌 → 说明。数值会实时刷新且需要播报时,在外层加 role="status"。
  • 图标是装饰,对读屏隐藏。不可聚焦,没有键盘操作。