# 徽标

挂在头像、图标、按钮角上的数字、红点或文字徽标。数量为 0 时自动隐藏，超过上限显示 99+。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<span class="zh-bdg"><button class="zh-btn" aria-label="消息">消息</button><span class="zh-bdg-mark" id="unread" data-count="5" data-tone="danger" data-label="条未读"></span></span>
<span class="zh-bdg"><button class="zh-btn">待办</button><span class="zh-bdg-mark" data-count="128" data-tone="primary" data-label="项待办"></span></span>
<span class="zh-bdg"><button class="zh-btn">动态</button><span class="zh-bdg-mark" data-dot="true" data-tone="danger" data-label="有更新"></span></span>
<span class="zh-bdg"><button class="zh-btn">功能</button><span class="zh-bdg-mark" data-text="NEW" data-tone="success"></span></span>

<script>
var m = document.getElementById('unread');
m.dataset.count = '12';
ZhaoUI.badge.paint(m); ZhaoUI.badge.pop(m);
</script>
```

## 样式类

`zh-bdg`、`zh-bdg-mark`、`zh-bdg-status`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-count` | .zh-bdg-mark | 整数 | 数字徽标；0 时隐藏（除非 data-show-zero） |
| `data-max` | .zh-bdg-mark | 整数，默认 99 | 超过则显示 99+ |
| `data-dot` | .zh-bdg-mark | true | 红点模式，只表示有更新 |
| `data-text` | .zh-bdg-mark | 字符串，如 NEW | 文字徽标 |
| `data-tone` | .zh-bdg-mark | danger \| primary \| success \| warning \| info \| neutral | 颜色 |
| `data-label` | .zh-bdg-mark | 字符串，如「条未读消息」 | 读屏时跟在数字后面，务必填写 |
| `data-pos` | .zh-bdg（外层） | top-left \| bottom-left \| bottom-right（默认右上） | 徽标相对被包裹元素的位置，默认右上 |
| `data-show-zero` | .zh-bdg-mark | true | 数量为 0 也显示 |

## 方法

- `ZhaoUI.badge.paint(el)`：修改 data-count 等属性后调用，重新渲染
- `ZhaoUI.badge.pop(el)`：播放一次弹跳动画（开启「减少动态效果」时不播放）

## 无障碍

- 可见的数字是 aria-hidden，另有视觉隐藏的文字读作「5 条未读」，所以 data-label 很重要
- 隐藏时设置 aria-hidden="true"

## 常见问题

### 徽标是什么？

挂在头像、图标、按钮角上的数字、红点或文字徽标。数量为 0 时自动隐藏，超过上限显示 99+。

### 怎么使用徽标？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。

### 徽标有哪些方法？

ZhaoUI.badge.paint(el)：修改 data-count 等属性后调用，重新渲染；ZhaoUI.badge.pop(el)：播放一次弹跳动画（开启「减少动态效果」时不播放）。

### 徽标支持键盘和读屏吗？

可见的数字是 aria-hidden，另有视觉隐藏的文字读作「5 条未读」，所以 data-label 很重要；隐藏时设置 aria-hidden="true"。

### 徽标需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。