Badge 徽标数
图标右上角的圆形徽标数字。
何时使用
- 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数。
- 用于其他需要展示状态的场景。
基本使用
独立使用
小红点
状态点
自定义颜色
color 接受任意 CSS 颜色字符串（预设色名 / 十六进制 / rgb 都行）。
偏移设置（offset）
offset: [x, y] 调整徽标相对默认位置的偏移量（单位 px）。
字符串 count（NEW / HOT 标签）
count 也接受字符串，常用作产品列表的「NEW / HOT / 限时」角标。
与 Avatar 组合（消息中心常见）
头像 + 消息数徽标，常见于头部导航的「消息中心 / 通知」按钮。
Badge 参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| count | number / string | -- | 展示数字，0 默认隐藏 |
| showZero | boolean | false | 当数值为 0 时是否展示 |
| overflowCount | number | 99 | 展示封顶的数字值 |
| dot | boolean | false | 不展示数字，只有一个小红点 |
| status | 'success' / 'processing' / 'default' / 'error' / 'warning' | -- | 状态点的颜色 |
| text | string | -- | 状态点的文字 |
| color | string | -- | 自定义小圆点颜色 |
| offset | [number, number] | -- | 设置徽标数偏移 |