Tag 标签
通常用来展示一些属性
演示
基础用法
由 type 属性来选择 tag 的类型。也可以通过 color 属性来自定义背景色。
可移除标签
设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 当 Tag 被移除时会触发 close 事件。
动画
如果想给标签添加显示或移除时的动画,只需要 添加渐变 即可。如果是一个标签列表就需要配合 Vue3 TransitionGroup 组件。
注意:列表中的每个元素都必须有一个独一无二的
key attribute。
API
Tag Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 类型 | primary | success | error | primary |
color | 颜色, 自定义颜色 | string | - |
closable | 是否可移除 | boolean | false |
Css Variables
| 变量 | 默认值 | 说明 |
|---|---|---|
--l-tag-bg | var(--l-primary-color-light5, #f6ffed) | 标签背景色 |
--l-tag-color | var(--l-primary-color, #52c41a) | 标签文本颜色 |
--l-tag-border-color | var(--l-primary-color, #52c41a) | 标签边框颜色 |