徽标
挂在头像、图标、按钮角上的数字、红点或文字徽标。数量为 0 时自动隐藏，超过上限显示 99+。
带行为 核心包 2 个方法
示例
代码
<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>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
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)：播放一次弹跳动画（开启「减少动态效果」时不播放）
样式类
zh-bdg zh-bdg-mark zh-bdg-status
无障碍
- 可见的数字是 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。