[tag] 新增 Tag 标签组件
Author: sunxiaobin89Created Aug 13, 2026Updated Aug 14, 2026
背景
管理后台「状态标记、分类标签、筛选条件」等场景的高频展示组件。目前 layui 2.x → 3.0 均未提供通用标签组件(现有 badge 为角标语义,与 tag 不同)。标签组件作为管理后台的通用能力,主流 UI 组件库普遍内置支持。
目标
- 新增通用
tag标签组件,基于 3.0 组件基类(Component)实现 - 支持语义状态色(normal / success / warning / danger / info)、尺寸(xs / sm / lg)、主题(实心 / 浅色 / 朴素)、胶囊圆角、禁用、可关闭交互
- 支持标签组:通过数据数组渲染一组标签,共用一套属性 + 单个标签个性覆盖
- 遵循
lay-命名空间与 CSS Variables 令牌体系
范围
- 新增:
src/components/tag.js、src/css/modules/tag.css、tests/visual/tag.html - 修改:
src/components/initializer.js、src/css/index.css、src/index.js/src/index.umd.js、src/core/i18n.js - 无需:docs、tests/unit
设计
控制方式
配置维度(状态色 / 尺寸 / 主题 / 圆角 / 可关闭)通过 data-lay-* 属性承载(对齐 menu 组件与官方 lay.parseDataset 前缀约定),CSS 用属性选择器驱动;class 仅保留结构(lay-tag)与状态(lay-is-disabled),关闭按钮由组件自动注入、无需手动编写。
<span class="lay-tag">默认</span>
<span class="lay-tag" data-lay-type="success" data-lay-effect="light">浅色成功</span>
<span class="lay-tag" data-lay-type="danger" data-lay-size="sm" data-lay-round>小胶囊</span>
<span class="lay-tag" data-lay-closable lay-filter="demo">可关闭</span>功能
- 状态色:normal / success / warning / danger / info(默认主题色)
- 主题(effect):solid 实心(默认)/ light 浅色 / plain 朴素
- 尺寸:xs / sm / lg;胶囊圆角(data-lay-round);禁用(lay-is-disabled 状态类)
- 可关闭:
data-lay-closable自动注入关闭按钮(含键盘 Enter/空格关闭),close(filter)事件回调返回 false 可阻断 - 标签组:
tag.generate({ data, ...公共属性 })数据数组渲染一组标签,字符串项用公共属性、对象项个性覆盖
CSS 要点
- 全量走令牌:七色 + 灰度 +
--lay-border-radius+--lay-spacing-* - 浅色/朴素主题用
color-mix由语义色派生淡色背景与细边框 - 换行间距:标签自身 margin(右间距 + 垂直间距),利用「换行时行尾 margin 被浏览器忽略、行首不缩进」的特性,行间距 8px
文件清单
| 操作 | 文件 |
|---|---|
| 新增 | src/components/tag.js、src/css/modules/tag.css、tests/visual/tag.html |
| 修改 | src/components/initializer.js、src/css/index.css、src/index.js、src/index.umd.js、src/core/i18n.js |
Source: layui/layui