Tag 标签

使用场景:用于标记事物的属性和纬度进行分类。

使用注意事项:

  • 虽然可以设置 size 属性取值 large,不建议使用。
  • 不建议在 Tag 中使用大段文本。

基本用法

size 属性设置不同尺寸的

Loading demo...

APIs

Tag

参数说明类型默认值
size标签的尺寸(large 尺寸为兼容表单场景 large = medium)

可选值:
'small', 'medium', 'large'
Enum'medium'
type标签的类型

可选值:
'normal', 'primary'
Enum'normal'
color标签颜色, 目前支持:blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 (color keywords作为 Tag 组件的保留字,请勿直接使用 ), 1.19.0 以上版本生效String-
animation是否开启动效Booleanfalse
afterAppear标签出现动画结束后执行的回调

签名:
Function() => void
Functionfunc.noop
onClick点击回调

签名:
Function() => void
Functionfunc.noop

Tag.Closeable

参数说明类型默认值
closeAreacloseable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮

可选值:
'tag', 'tail'
Enum-
size标签的尺寸(large 尺寸为兼容表单场景 large = medium)

可选值:
'small', 'medium', 'large'
Enum-
onClose点击关闭按钮时的回调

签名:
Function(from: String) => Boolean
参数:
from: {String} 事件来源, tag: 标签体点击, tail: 关闭按钮点击
返回值:
{Boolean} true则关闭, false阻止关闭
Function-
afterClose标签关闭后执行的回调

签名:
Function() => void
Function-
onClick点击回调

签名:
Function() => void
Function-

Tag.Selectable

参数说明类型默认值
checked标签是否被选中,受控用法
tag checked or not, a controlled way
Boolean-
defaultChecked标签是否默认被选中,非受控用法
tag checked or not by default, a uncontrolled way
Boolean-
onChange选中状态变化时触发的事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否选中
e: {Event} Dom 事件对象
Functionfunc.noop
disabled标签是否被禁用Boolean-

Demo

可关闭 Tag

Loading demo...

可选择 Tag

Loading demo...

使用带有颜色的标签

Loading demo...