如何创建可忽略的清晰度标签？答案

【问题标题】：How to create dismissable Clarity labels?如何创建可忽略的清晰度标签？
【发布时间】：2020-01-23 11:39:21
【问题描述】：

在 Clarity Components 文档中，有一个“消除标签”的工作示例，但不幸的是，没有针对这种情况的示例代码。

见https://v2.clarity.design/labels

文档说 - 可以取消标签。使用标签最右侧的关闭图标将其关闭。

如何在示例中创建标签？我尝试了以下但没有成功（只是希望最好）

<span class="label" >james@test.com<clr-icon shape="close" ></clr-icon></span>

【问题讨论】：

标签： label dismiss vmware-clarity

【解决方案1】：

您可以编写一个指令，例如dismissable，并让它在标签上添加一个 X 图标，并且每当用户单击 X 时它都会发出一个事件。

import { Directive, ElementRef, Renderer2, AfterViewInit, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[dismissable]'
})
export class DismissabelDirective implements AfterViewInit  {

  @Output()
  close = new EventEmitter();

  constructor(private renderer: Renderer2, private elRef: ElementRef) { 
  }

  ngAfterViewInit() {
    let icon = this.renderer.createElement('clr-icon');
    icon.setAttribute('shape', 'close');
    icon.style.margin = '1rem;'
    this.renderer.setStyle(icon, 'margin-left', '0.5rem');
    this.renderer.setStyle(icon, 'margin-right', '-0.25rem');
    this.renderer.setStyle(icon, 'cursor', 'pointer');
    this.renderer.appendChild(this.elRef.nativeElement, icon);
    this.renderer.listen(icon, 'click', () => {this.close.emit(); return true;})
  }
}

你可以像下面这样使用它：

app.component.html

<div class="container">
  <span class="label" dismissable (close)="delete(item)" *ngFor="let item of items">{{item}}</span>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  items = ['Apple', 'Orange', 'Banana'];

  delete(item) {
    const index: number = this.items.indexOf(item);
    if (index !== -1) {
        this.items.splice(index, 1);
    }  
  }

}

这里是完整的 StackBlitz：https://stackblitz.com/edit/clarity-light-theme-v2-dismissable-labels

【讨论】：

【解决方案2】：

没有这种行为的实现，它只是一个 CSS/HTML 示例，展示了该模式的外观。由应用程序通过单击关闭按钮删除标签来处理标签的“关闭”。

【讨论】：