Count 计数
挂在图标、标签旁边的小数字:未读数、购物车件数、待办数量。数字变化时会滚动替换并鼓一下,提醒人注意。
基本用法
value 为 0 时默认不渲染;超过 max(默认 99)显示成“99+”。
34299+999+0
颜色
accent(默认)用于一般的未读数;danger 用于需要处理的问题;neutral 用于不需要强调的数量。
555
变化时的动效
数字变大时新值自下而上滚入,变小时自上而下;同时徽标放大到 1.35 再回弹。减到 0 时整个徽标消失。
通知3 条未读通知
规格
- 数字
- 旧值 150ms 滚出,新值 spring 滚入
- 徽标
- scale 1 → 1.35 → 1 回弹
- 封顶
- 超过 max 显示“max+”
接口
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value* | number | — | 数量。 |
max | number | 99 | 超过后显示成“99+”。 |
showZero | boolean | — | 0 也显示,默认不显示。 |
tone | 'accent' | 'danger' | 'neutral' | 'accent' | 颜色。 |
label | string | — | 给读屏的完整说法,如“3 条未读通知”。不传只读出数字。 |
无障碍
- 光一个数字对读屏用户没有意义,请传
label说明这是什么的数量;传了之后可见的数字对读屏隐藏,只读 label。 - 组件本身不是 live region,数字变化不会自动播报。需要播报时放进
role="status"的容器;挂在按钮上时更推荐把数量写进按钮的名字。 - 不可聚焦,没有键盘操作。开了减弱动效时滚动和回弹都会跳过。