Tag标签

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

何时使用#

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

代码演示

Tag 1LinkTag 2Prevent Default

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

expand codeexpand code
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>
  `,
  styles: []
})
export class NzDemoTagBasicComponent {
  onClose(): void {
    console.log('tag was closed.');
  }

  afterClose(): void {
    console.log('after tag closed');
  }

  preventDefault(e: Event): void {
    e.preventDefault();
    e.stopPropagation();
    console.log('tag can not be closed.');
  }
}
Unremovable Tag 2 Tag 3 New Tag

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

expand codeexpand code
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'nz-demo-tag-control',
  template: `
    <nz-tag
      *ngFor="let tag of tags; let i = index"
      [nzMode]="i === 0 ? 'default' : 'closeable'"
      (nzAfterClose)="handleClose(tag)"
    >
      {{ sliceTagName(tag) }}
    </nz-tag>
    <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
      <i nz-icon type="plus"></i> New Tag
    </nz-tag>
    <input
      #inputElement
      nz-input
      nzSize="small"
      *ngIf="inputVisible"
      type="text"
      [(ngModel)]="inputValue"
      style="width: 78px;"
      (blur)="handleInputConfirm()"
      (keydown.enter)="handleInputConfirm()"
    />
  `,
  styles: [
    `
      .editable-tag {
        background: rgb(255, 255, 255);
        border-style: dashed;
      }
    `
  ]
})
export class NzDemoTagControlComponent {
  tags = ['Unremovable', 'Tag 2', 'Tag 3'];
  inputVisible = false;
  inputValue = '';
  @ViewChild('inputElement') inputElement: ElementRef;

  handleClose(removedTag: {}): void {
    this.tags = this.tags.filter(tag => tag !== removedTag);
  }

  sliceTagName(tag: string): string {
    const isLongTag = tag.length > 20;
    return isLongTag ? `${tag.slice(0, 20)}...` : tag;
  }

  showInput(): void {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputElement.nativeElement.focus();
    }, 10);
  }

  handleInputConfirm(): void {
    if (this.inputValue && this.tags.indexOf(this.inputValue) === -1) {
      this.tags = [...this.tags, this.inputValue];
    }
    this.inputValue = '';
    this.inputVisible = false;
  }
}
Categories: Movie Books Music Sports

选择你感兴趣的话题。

expand codeexpand code
import { Component } from '@angular/core';

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>
  `,
  styles: []
})
export class NzDemoTagHotTagsComponent {
  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);
  }
}

Presets:

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Custom:

#f50#2db7f5#87d068#108ee9

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

expand codeexpand code
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'nz-demo-tag-colorful',
  encapsulation: ViewEncapsulation.None,
  template: `
    <h4 style="margin-bottom: 16px;">Presets:</h4>
    <div>
      <nz-tag [nzColor]="'magenta'">magenta</nz-tag>
      <nz-tag [nzColor]="'red'">red</nz-tag>
      <nz-tag [nzColor]="'volcano'">volcano</nz-tag>
      <nz-tag [nzColor]="'orange'">orange</nz-tag>
      <nz-tag [nzColor]="'gold'">gold</nz-tag>
      <nz-tag [nzColor]="'lime'">lime</nz-tag>
      <nz-tag [nzColor]="'green'">green</nz-tag>
      <nz-tag [nzColor]="'cyan'">cyan</nz-tag>
      <nz-tag [nzColor]="'blue'">blue</nz-tag>
      <nz-tag [nzColor]="'geekblue'">geekblue</nz-tag>
      <nz-tag [nzColor]="'purple'">purple</nz-tag>
    </div>
    <h4 style="margin: 16px 0px;'">Custom:</h4>
    <div>
      <nz-tag [nzColor]="'#f50'">#f50</nz-tag>
      <nz-tag [nzColor]="'#2db7f5'">#2db7f5</nz-tag>
      <nz-tag [nzColor]="'#87d068'">#87d068</nz-tag>
      <nz-tag [nzColor]="'#108ee9'">#108ee9</nz-tag>
    </div>
  `,
  styles: [
    `
      .ant-tag {
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoTagColorfulComponent {}
Tag1Tag2Tag3

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

expand codeexpand code
import { Component } from '@angular/core';

@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);
  }
}

API#

单独引入此组件#

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

import { NzTagModule } from 'ng-zorro-antd';

nz-tag#

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