跳到正文

标签

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

带行为 核心包 2 个事件

示例

已发布 待审核 草稿
设计 研发

在线试用 Markdown 版

代码

<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<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--checkaria-checked="true|false"多选：点击切换
primary / success / warning / danger / info.zh-tagclass颜色
zh-tag--filled / zh-tag--outline / zh-tag--sm / zh-tag--lg.zh-tagclass填充或描边外观、小或大尺寸，可与颜色类组合

事件

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

样式类

zh-tag　zh-tag--x　zh-tag--check　zh-tag-close　zh-tag-group

无障碍

  • 单选组使用 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。