NG-ALAIN- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf qr 二维码 lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
增加标签的展开与收进功能。
代码演示
结合 nz-checkable-tag 的 tag-select 组件，方便的应用于筛选类目的业务场景中。
import { Component } from '@angular/core';
import { TagSelectComponent } from '@delon/abc/tag-select';
import { NzTagModule } from 'ng-zorro-antd/tag';
interface TagSelectDemoItem {
id: number;
text: string;
value: boolean;
}
@Component({
selector: 'components-tag-select-simple',
template: `
<tag-select>
@for (i of categories; track $index) {
<nz-tag nzMode="checkable" [(nzChecked)]="i.value" (nzCheckedChange)="change(i)">
{{ i.text }}
</nz-tag>
}
</tag-select>
`,
standalone: true,
imports: [TagSelectComponent, NzTagModule]
})
export class ComponentsTagSelectSimpleComponent {
categories: TagSelectDemoItem[] = [
{ 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(item: TagSelectDemoItem): void {
if (item.id === 0) {
this.categories.forEach(i => (i.value = item.value));
return;
}
this.categories.find(w => w.id === 0)!.value = false;
}
}