Tag标签

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

何时使用#

  • 用于标记事物的属性和维度。
  • 进行分类。
import { NzTagModule } from 'ng-zorro-antd/tag';

代码演示

Tag 1LinkTag 2Prevent Default

基本标签的用法,可以通过添加 nzMode="closeable" 变为可关闭标签。可关闭标签具有 nzOnClose 事件。

expand codeexpand code
      加载中
    
Unremovable Tag 2 Tag 3 New Tag

用数组生成一组标签,可以动态添加和删除。

expand codeexpand code
      加载中
    
Categories: Movie Books Music Sports

选择你感兴趣的话题。

expand codeexpand code
      加载中
    
TwitterYoutubeFacebookLinkedIn

在 tag 组件内嵌入 icon。

expand codeexpand code
      加载中
    

Presets:

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Custom:

#f50#2db7f5#87d068#108ee9

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

expand codeexpand code
      加载中
    
Tag1Tag2Tag3

可通过 nzMode="checkable" 实现类似 Checkbox 的效果,点击切换选中效果。

expand codeexpand code
      加载中
    
pinkredyelloworangecyangreenbluepurplegeekbluemagentavolcanogoldlime

无边框模式。

expand codeexpand code
      加载中
    

Without icon

successprocessingerrorwarningdefault

With icon

successprocessingerrorwarningdefault

预设五种状态颜色,可以通过设置 nzColorsuccessprocessingerrordefaultwarning 来代表不同的状态。

expand codeexpand code
      加载中
    

API#

nz-tag#

参数说明类型默认值
[nzMode]设定标签工作的模式'closeable' | 'default' | 'checkable''default'
[nzChecked]设置标签的选中状态,可双向绑定,在 nzMode="checkable" 时可用booleanfalse
[nzColor]标签色string-
[nzBordered]是否有边框booleantrue
(nzOnClose)关闭时的回调,在 nzMode="closable" 时可用EventEmitter<MouseEvent>-
(nzCheckedChange)设置标签的选中状态的回调,在 nzMode="checkable" 时可用EventEmitter<void>-