Tag标签

Tag标签

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

何时使用

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

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

代码演示

基本

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

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()">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.');
  }
  preventDefault(e: Event): void {
    e.preventDefault();
    e.stopPropagation();
    console.log('tag can not be closed.');
  }
}

动态添加和删除

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

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 nzType="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', { static: false }) 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;
  }
}

热门标签

选择你感兴趣的话题。

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

预设状态的标签

预设五种状态颜色，可以通过设置 nzColor 为 success、 processing、error、default、warning 来代表不同的状态。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tag-status',
  template: `
    <div>
      <h4>Without icon</h4>
      <nz-tag nzColor="success">success</nz-tag>
      <nz-tag nzColor="processing">processing</nz-tag>
      <nz-tag nzColor="error">error</nz-tag>
      <nz-tag nzColor="warning">warning</nz-tag>
      <nz-tag nzColor="default">default</nz-tag>
    </div>
    <div>
      <h4>With icon</h4>
      <nz-tag nzColor="success">
        <i nz-icon nzType="check-circle"></i>
        <span>success</span>
      </nz-tag>
      <nz-tag nzColor="processing">
        <i nz-icon nzType="sync" nzSpin></i>
        <span>processing</span>
      </nz-tag>
      <nz-tag nzColor="error">
        <i nz-icon nzType="close-circle"></i>
        <span>error</span>
      </nz-tag>
      <nz-tag nzColor="warning">
        <i nz-icon nzType="exclamation-circle"></i>
        <span>warning</span>
      </nz-tag>
      <nz-tag nzColor="default">
        <i nz-icon nzType="clock-circle"></i>
        <span>default</span>
      </nz-tag>
    </div>
  `
})
export class NzDemoTagStatusComponent {}

多彩标签

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

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 {}

可选择

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

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

图标按钮

在 tag 组件内嵌入 icon。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-tag-icon',
  template: `
    <nz-tag nzColor="#55acee">
      <i nz-icon nzType="twitter"></i>
      <span>Twitter</span>
    </nz-tag>
    <nz-tag nzColor="#cd201f">
      <i nz-icon nzType="youtube"></i>
      <span>Youtube</span>
    </nz-tag>
    <nz-tag nzColor="#3b5999">
      <i nz-icon nzType="facebook"></i>
      <span>Facebook</span>
    </nz-tag>
    <nz-tag nzColor="#55acee">
      <i nz-icon nzType="linkedin"></i>
      <span>LinkedIn</span>
    </nz-tag>
  `
})
export class NzDemoTagIconComponent {}

API

nz-tagcomponent

参数	说明	类型	默认值
`[nzMode]`	设定标签工作的模式	`‘closeable’ \| ‘default’ \| ‘checkable’`	`‘default’`
`[nzChecked]`	设置标签的选中状态，可双向绑定，在 `nzMode=”checkable”` 时可用	`boolean`	`false`
`[nzColor]`	标签色	`string`	-
`(nzOnClose)`	关闭时的回调，在 `nzMode=”closable”` 时可用	`EventEmitter<MouseEvent>`	-
`(nzCheckedChange)`	设置标签的选中状态的回调，在 `nzMode=”checkable”` 时可用	`EventEmitter<void>`	-