This article has not been translated, hope that your can PR to translated it. Help us!

tag-select 标签选择器

增加标签的展开与收进功能。

import { TagSelectModule } from '@delon/abc/tag-select';

代码演示

基础样例

结合 nz-checkable-tag 的 tag-select 组件，方便的应用于筛选类目的业务场景中。

import { Component } from '@angular/core';
@Component({
  selector: 'components-tag-select-simple',
  template: `
  <tag-select>
    <nz-tag *ngFor="let i of categories; let idx = index" nzMode="checkable"
        [(nzChecked)]="i.value" (nzCheckedChange)="change(i)">{{i.text}}</nz-tag>
  </tag-select>
  `
})
export class ComponentsTagSelectSimpleComponent {
  categories = [
    { id: 0, text: '全部', value: false },
    { id: 1, text: '类目一', value: false },
    { id: 2, text: '类目二', value: false },
    { id: 3, text: '类目三', value: false },
    { id: 4, text: '类目四', value: false },
    { id: 5, text: '类目五', value: false },
    { id: 6, text: '类目六', value: false },
    { id: 7, text: '类目七', value: false },
    { id: 8, text: '类目八', value: false },
    { id: 9, text: '类目九', value: false },
    { id: 10, text: '类目十', value: false },
    { id: 11, text: '类目十一', value: false },
    { id: 12, text: '类目十二', value: false },
    { id: 13, text: '类目十三', value: false },
    { id: 14, text: '类目十四', value: false },
    { id: 15, text: '类目十五', value: false }
  ];
  change(res: any) {
    if (res.id !== 0) return;
    this.categories.forEach(i => i.value = res.value);
  }
}

API

tag-select