# 标签

标签：普通的彩色标签、可关闭的标签，以及可选中的标签（单选组、多选）。普通标签只要 class="zh-tag" 加颜色类，不需要 zh-tag--x；zh-tag--x 才表示可关闭或可选。新增标签的输入框不在库里，按你的业务自己做。

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

## 用法

```html
<span class="zh-tag success">已发布</span>
<span class="zh-tag warning">待审核</span>
<span class="zh-tag">草稿</span>

<div id="tag-demo">
  <span class="zh-tag zh-tag--x primary"><span>设计</span><button type="button" class="zh-tag-close" aria-label="移除 设计"><i data-i="x"></i></button></span>
  <span class="zh-tag zh-tag--x"><span>研发</span><button type="button" class="zh-tag-close" aria-label="移除 研发"><i data-i="x"></i></button></span>
</div>

<div class="zh-tag-group" id="period" role="radiogroup" aria-label="选择周期">
  <button class="zh-tag zh-tag--x zh-tag--check" role="radio" aria-checked="true" tabindex="0"><i data-i="check" data-s="12" class="zh-tag-tick"></i>今天</button>
  <button class="zh-tag zh-tag--x zh-tag--check" role="radio" aria-checked="false" tabindex="-1"><i data-i="check" data-s="12" class="zh-tag-tick"></i>近 7 天</button>
</div>

<script>
document.getElementById('period').addEventListener('zh:tag-change', function (e) {
  console.log(e.detail.value);
});
</script>
```

## 样式类

`zh-tag`、`zh-tag--x`、`zh-tag--check`、`zh-tag-close`、`zh-tag-group`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-tag` | <span>（class） | 可加 primary \| success \| warning \| danger | 普通标签。不加颜色类就是中性灰（适合「草稿」「默认」这类状态）；加 zh-tag--x 才有关闭按钮或选中行为 |
| `zh-tag-close` | .zh-tag--x 内的按钮（class） | 无 | 点击后移除所在标签；按钮必须有 aria-label（如「移除 设计」） |
| `role="radio"` | .zh-tag--check | 放在 role="radiogroup" 里 | 单选：点击或方向键切换，roving tabindex |
| `role="checkbox"` | .zh-tag--check | aria-checked="true\|false" | 多选：点击切换 |
| `primary / success / warning / danger / info` | .zh-tag | class | 颜色 |
| `zh-tag--filled / zh-tag--outline / zh-tag--sm / zh-tag--lg` | .zh-tag | class | 填充或描边外观、小或大尺寸，可与颜色类组合 |

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:tag-remove` | 被点击的 .zh-tag | { label, tag } | 移除前触发（冒泡，可取消）；调用 preventDefault() 则保留标签 |
| `zh:tag-change` | 单选：radiogroup；多选：被点击的标签 | 单选 { value, values }；多选 { value, checked, values } | 选中状态变化时触发（冒泡） |

## 无障碍

- 单选组使用 radiogroup / radio 语义，方向键移动并选中；多选使用 checkbox 语义
- 移除后，如果相邻元素可以聚焦（比如「新增」按钮），焦点会移过去；普通标签本身不可聚焦，所以没有可移的目标时焦点回到页面
- 选中不只靠颜色：选中的标签左侧显示对勾

## 常见问题

### 标签是什么？

标签：普通的彩色标签、可关闭的标签，以及可选中的标签（单选组、多选）。普通标签只要 class="zh-tag" 加颜色类，不需要 zh-tag--x；zh-tag--x 才表示可关闭或可选。新增标签的输入框不在库里，按你的业务自己做。

### 怎么使用标签？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 标签有哪些事件？

zh:tag-remove（移除前触发（冒泡，可取消）；调用 preventDefault() 则保留标签）；zh:tag-change（选中状态变化时触发（冒泡））。

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

单选组使用 radiogroup / radio 语义，方向键移动并选中；多选使用 checkbox 语义；移除后，如果相邻元素可以聚焦（比如「新增」按钮），焦点会移过去；普通标签本身不可聚焦，所以没有可移的目标时焦点回到页面；选中不只靠颜色：选中的标签左侧显示对勾。

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

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