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
变量 | 默认值 | 说明 |
---|---|---|
--nt-tag-bg | var(--nt-primary-color-light5, #f6ffed) | 标签背景色 |
--nt-tag-color | var(--nt-primary-color, #52c41a) | 标签文本颜色 |
--nt-tag-border-color | var(--nt-primary-color, #52c41a) | 标签边框颜色 |