Tag标签

进行标记和分类的小标签,用于标记事物的属性和维度,以及进行分类。

规则

  • 标签文字必须显示完全。

代码演示

基本用法

Tag 分为两种类型:selectable / readonly, 后者是无交互的,尺寸更小,通常用于内容展示。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-tag-basic',
  4. template: `
  5. <div class="tag-container">
  6. <Tag data-seed="logId">Basic</Tag>
  7. <Tag [selected]="true">Selected</Tag>
  8. <Tag [disabled]="true">Disabled</Tag>
  9. <Tag (onChange)="onChange($event)">Callback</Tag>
  10. <Tag [closable]="true" (onClose)="onClose()" (afterClose)="afterClose()"> Closable</Tag>
  11. <Tag [small]="true">Small and Readonly</Tag>
  12. </div>
  13. `,
  14. styles: [
  15. `
  16. .tag-container {
  17. display: flex;
  18. padding-top: 9px;
  19. flex-direction: row;
  20. flex-wrap: wrap;
  21. }
  22. .tag-container > tag {
  23. margin-left: 9px;
  24. margin-bottom: 9px;
  25. }
  26. `
  27. ]
  28. })
  29. export class DemoTagBasicComponent {
  30. onChange(selected) {
  31. console.log(`tag selected: ${selected}`);
  32. }
  33. onClose() {
  34. console.log('onClose');
  35. }
  36. afterClose() {
  37. console.log('afterClose');
  38. }
  39. }

Tag标签 - 图1

API

参数说明类型默认值
[small]小号标签booleanfalse
[disabled]是否不可用booleanfalse
[closable]是否关闭(非 disabled small 状态)booleanfalse
[selected]是否默认选中booleanfalse
(onChange)切换选中回调函数EventEmitter<boolean>-
(onClose)点关闭时的回调函数EventEmitter<void>-
(afterClose)关闭后的回调EventEmitter<void>-