@include 'common'

# Badge

图标右上角的圆形徽标数字。

## 何时使用

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
在有新消息、讯息时，或者是 app/插件/功能模块可以更新、升级时使用这个组件。

## 展示

### 基本

简单的徽章展示，当 count 为 0 时，默认不显示，但可以使用 showZero 修改为显示；

@include 'demo1'

### 封顶数字

当超过 overflowCount 数值，会显示${overflowCount}+，默认值是 99.
@include 'demo2'

### 仅展示小圆点

@include 'demo3'

### 自定义图标、颜色等

徽标内容和颜色根据 content 自定制；
@include 'demo4'

### 独立使用

不包裹任何元素独立使用，自定样式；
@include 'demo5'

### 徽标可点击

@include 'demo6'

### 内容动态变化

展示徽标内容动态变化的效果
@include 'demo7'

### 无障碍支持

可通过给内容添加 className="next-sr-only"，使内容仅能被读屏软件读取，但不会展示到页面上。
@include 'demo8'