• Tag标签
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-tagcomponent

    Tag标签

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

    何时使用

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

    单独引入此组件

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

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

    代码演示

    Tag标签 - 图1

    基本

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-tag-basic',
    5.   template: `
    6.     <nz-tag>Tag 1</nz-tag>
    7.     <nz-tag>
    8.       <a href="https://github.com/NG-ZORRO/ng-zorro-antd">Link</a>
    9.     </nz-tag>
    10.     <nz-tag nzMode="closeable" (nzOnClose)="onClose()" (nzAfterClose)="afterClose()">Tag 2</nz-tag>
    11.     <nz-tag nzMode="closeable" (nzOnClose)="preventDefault($event)">Prevent Default</nz-tag>
    12.   `
    13. })
    14. export class NzDemoTagBasicComponent {
    15.   onClose(): void {
    16.     console.log('tag was closed.');
    17.   }
    19.   afterClose(): void {
    20.     console.log('after tag closed');
    21.   }
    23.   preventDefault(e: Event): void {
    24.     e.preventDefault();
    25.     e.stopPropagation();
    26.     console.log('tag can not be closed.');
    27.   }
    28. }

    Tag标签 - 图2

    动态添加和删除

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

    1. import { Component, ElementRef, ViewChild } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-tag-control',
    5.   template: `
    6.     <nz-tag
    7.       *ngFor="let tag of tags; let i = index"
    8.       [nzMode]="i === 0 ? 'default' : 'closeable'"
    9.       (nzAfterClose)="handleClose(tag)"
    10.     >
    11.       {{ sliceTagName(tag) }}
    12.     </nz-tag>
    13.     <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
    14.       <i nz-icon nzType="plus"></i> New Tag
    15.     </nz-tag>
    16.     <input
    17.       #inputElement
    18.       nz-input
    19.       nzSize="small"
    20.       *ngIf="inputVisible"
    21.       type="text"
    22.       [(ngModel)]="inputValue"
    23.       style="width: 78px;"
    24.       (blur)="handleInputConfirm()"
    25.       (keydown.enter)="handleInputConfirm()"
    26.     />
    27.   `,
    28.   styles: [
    29.     `
    30.       .editable-tag {
    31.         background: rgb(255, 255, 255);
    32.         border-style: dashed;
    33.       }
    34.     `
    35.   ]
    36. })
    37. export class NzDemoTagControlComponent {
    38.   tags = ['Unremovable', 'Tag 2', 'Tag 3'];
    39.   inputVisible = false;
    40.   inputValue = '';
    41.   @ViewChild('inputElement', { static: false }) inputElement: ElementRef;
    43.   handleClose(removedTag: {}): void {
    44.     this.tags = this.tags.filter(tag => tag !== removedTag);
    45.   }
    47.   sliceTagName(tag: string): string {
    48.     const isLongTag = tag.length > 20;
    49.     return isLongTag ? `${tag.slice(0, 20)}...` : tag;
    50.   }
    52.   showInput(): void {
    53.     this.inputVisible = true;
    54.     setTimeout(() => {
    55.       this.inputElement.nativeElement.focus();
    56.     }, 10);
    57.   }
    59.   handleInputConfirm(): void {
    60.     if (this.inputValue && this.tags.indexOf(this.inputValue) === -1) {
    61.       this.tags = [...this.tags, this.inputValue];
    62.     }
    63.     this.inputValue = '';
    64.     this.inputVisible = false;
    65.   }
    66. }

    Tag标签 - 图3

    热门标签

    选择你感兴趣的话题。

    1. import { Component } from '@angular/core';
    3. const tagsFromServer = ['Movie', 'Books', 'Music', 'Sports'];
    5. @Component({
    6.   selector: 'nz-demo-tag-hot-tags',
    7.   template: `
    8.     <strong>Categories: </strong>
    9.     <nz-tag
    10.       *ngFor="let tag of hotTags"
    11.       nzMode="checkable"
    12.       [nzChecked]="selectedTags.indexOf(tag) > -1"
    13.       (nzCheckedChange)="handleChange($event, tag)"
    14.     >
    15.       {{ tag }}
    16.     </nz-tag>
    17.   `
    18. })
    19. export class NzDemoTagHotTagsComponent {
    20.   hotTags = tagsFromServer;
    21.   selectedTags: string[] = [];
    23.   handleChange(checked: boolean, tag: string): void {
    24.     if (checked) {
    25.       this.selectedTags.push(tag);
    26.     } else {
    27.       this.selectedTags = this.selectedTags.filter(t => t !== tag);
    28.     }
    29.     console.log('You are interested in: ', this.selectedTags);
    30.   }
    31. }

    Tag标签 - 图4

    多彩标签

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

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-tag-colorful',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <h4 style="margin-bottom: 16px;">Presets:</h4>
    8.     <div>
    9.       <nz-tag [nzColor]="'magenta'">magenta</nz-tag>
    10.       <nz-tag [nzColor]="'red'">red</nz-tag>
    11.       <nz-tag [nzColor]="'volcano'">volcano</nz-tag>
    12.       <nz-tag [nzColor]="'orange'">orange</nz-tag>
    13.       <nz-tag [nzColor]="'gold'">gold</nz-tag>
    14.       <nz-tag [nzColor]="'lime'">lime</nz-tag>
    15.       <nz-tag [nzColor]="'green'">green</nz-tag>
    16.       <nz-tag [nzColor]="'cyan'">cyan</nz-tag>
    17.       <nz-tag [nzColor]="'blue'">blue</nz-tag>
    18.       <nz-tag [nzColor]="'geekblue'">geekblue</nz-tag>
    19.       <nz-tag [nzColor]="'purple'">purple</nz-tag>
    20.     </div>
    21.     <h4 style="margin: 16px 0px;'">Custom:</h4>
    22.     <div>
    23.       <nz-tag [nzColor]="'#f50'">#f50</nz-tag>
    24.       <nz-tag [nzColor]="'#2db7f5'">#2db7f5</nz-tag>
    25.       <nz-tag [nzColor]="'#87d068'">#87d068</nz-tag>
    26.       <nz-tag [nzColor]="'#108ee9'">#108ee9</nz-tag>
    27.     </div>
    28.   `,
    29.   styles: [
    30.     `
    31.       .ant-tag {
    32.         margin-bottom: 8px;
    33.       }
    34.     `
    35.   ]
    36. })
    37. export class NzDemoTagColorfulComponent {}

    Tag标签 - 图5

    可选择

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

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-tag-checkable',
    5.   template: `
    6.     <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag1</nz-tag>
    7.     <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag2</nz-tag>
    8.     <nz-tag nzMode="checkable" [nzChecked]="true" (nzCheckedChange)="checkChange($event)">Tag3</nz-tag>
    9.   `
    10. })
    11. export class NzDemoTagCheckableComponent {
    12.   checkChange(e: boolean): void {
    13.     console.log(e);
    14.   }
    15. }

    API

    nz-tagcomponent

    参数说明类型默认值
    [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>-