Tag 标签

进行标记和分类的小标签。

何时使用 #

  • 用于标记事物的属性和维度。

  • 进行分类。

代码演示

基本标签的用法,可以通过添加 nzClosable 变为可关闭标签。可关闭标签具有 nzBeforeClose nzClose 两个事件。

用数组生成一组标签,可以动态添加和删除,通过监听删除动画结束的事件 nzClose 实现。

选择你感兴趣的话题。

我们添加了多种预设色彩的标签样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。

可通过 nz-checkable-tag 实现类似 Checkbox 的效果,点击切换选中效果。

API

nz-tag

参数 说明 类型 双向绑定 默认值
nzClosable 标签是否可以关闭 bool false
nzColor 标签色 string -
nzBeforeClose 关闭前事件,参数为:(event: Event)。可以通过设置 event.preventDefault(); 来阻止标签关闭。 Event -
nzClose 关闭后事件,参数为:(event: Event),此时关闭的动画已完成。 Event -

nz-checkable-tag

参数 说明 类型 双向绑定 默认值
nzChecked 设置标签的选中状态 bool false
nzClosable 标签是否可以关闭 bool false
nzColor 标签色 string -
nzBeforeClose 关闭前的事件,参数为:(event: Event): void。可以通过设置 event.preventDefault(); 来阻止标签关闭。 Event -
nzClose 关闭后事件,参数为:(event: Event): void,此时关闭的动画已完成。 Event -
nzChange 点击标签时触发的事件,参数为:(checked: boolean): void。 Event -