Как создать ярлыки Clarity? - PullRequest
Новая
       24

Как создать ярлыки Clarity?

0 голосов
/ 23 января 2020

В документации по компонентам Clarity есть рабочий пример для "Dimissing label", но, к сожалению, нет примера кода для этого случая.

См. https://v2.clarity.design/labels

Документация гласит - этикетка может быть отклонена. Используйте значок закрытия в самой правой части ярлыка, чтобы закрыть его.

Как создать ярлык в примере? Я безуспешно пробовал следующее (просто надеялся на лучшее) 

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

Ответы [ 2 ]

2 голосов
/ 23 января 2020

Нет реализации этого поведения, скорее это просто пример CSS / HTML, который показывает, как будет выглядеть шаблон. Приложение может обработать «отклонение» метки, удалив метку при нажатии кнопки закрытия.

1 голос
/ 08 февраля 2020

Вы можете написать директиву, скажем 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

...