Tag标签

用于标记事物的属性和维度。
进行分类。

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tag-basic',
  template: `
    <nz-tag>Tag 1</nz-tag>
    <nz-tag>
      <a href="https://github.com/NG-ZORRO/ng-zorro-antd">Link</a>
    </nz-tag>
    <nz-tag nzMode="closeable" (nzOnClose)="onClose()" (nzAfterClose)="afterClose()">Tag 2</nz-tag>
    <nz-tag nzMode="closeable" (nzOnClose)="preventDefault($event)">Prevent Default</nz-tag>
  `
})
export class NzDemoTagBasicComponent {
  onClose(): void {
    console.log('tag was closed.');
  }
  afterClose(): void {
  }
  preventDefault(e: Event): void {
    e.preventDefault();
    e.stopPropagation();
    console.log('tag can not be closed.');
  }
}

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

热门标签

选择你感兴趣的话题。


const tagsFromServer = ['Movie', 'Books', 'Music', 'Sports'];
@Component({
  selector: 'nz-demo-tag-hot-tags',
  template: `
    <strong>Categories: </strong>
    <nz-tag
      *ngFor="let tag of hotTags"
      nzMode="checkable"
      [nzChecked]="selectedTags.indexOf(tag) > -1"
      (nzCheckedChange)="handleChange($event, tag)"
    >
      {{ tag }}
    </nz-tag>
  `
})
  hotTags = tagsFromServer;
  selectedTags: string[] = [];
  handleChange(checked: boolean, tag: string): void {
    if (checked) {
      this.selectedTags.push(tag);
    } else {
      this.selectedTags = this.selectedTags.filter(t => t !== tag);
    }
    console.log('You are interested in: ', this.selectedTags);
  }
}

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

可选择

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


@Component({
  selector: 'nz-demo-tag-checkable',
  template: `
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag1</nz-tag>
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag2</nz-tag>
    <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag3</nz-tag>
  `
})
export class NzDemoTagCheckableComponent {
  checkChange(e: boolean): void {
    console.log(e);
  }