Tag标签

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

何时使用

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

代码演示

Tag标签 - 图1

基本

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

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

Tag标签 - 图2

动态添加和删除

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

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

Tag标签 - 图3

热门标签

选择你感兴趣的话题。

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

Tag标签 - 图4

多彩标签

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

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

Tag标签 - 图5

可选择

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

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

Tag标签 - 图6

预设状态的标签

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tag-status',
  4. template: `
  5. <nz-tag nzColor="success">success</nz-tag>
  6. <nz-tag nzColor="processing">processing</nz-tag>
  7. <nz-tag nzColor="error">error</nz-tag>
  8. <nz-tag nzColor="default">default</nz-tag>
  9. <nz-tag nzColor="warning">warning</nz-tag>
  10. `
  11. })
  12. export class NzDemoTagStatusComponent {}

API

nz-tagcomponent

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