ohayolibs
Version:
Ohayo is a set of essential modules for ohayojp.
66 lines (58 loc) • 1.69 kB
Markdown
---
order: 2
debug: true
title:
zh-CN: 自定义图标
en-US: Customize Icon
---
可以针对不同节点采用样式覆盖的方式定制图标。
You can customize icons for different nodes.
```ts
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@ohayo/form';
import { NzTreeNode } from 'ng-zorro-antd/tree';
@Component({
selector: 'app-demo',
template: `
<sf *ngIf="schema" [schema]="schema"></sf>
<ng-template
<span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
<span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
</span>
</ng-template>
`,
})
export class DemoComponent implements OnInit {
@ViewChild('customTpl', { static: true }) private customTpl!: TemplateRef<{ $implicit: NzTreeNode }>;
schema: SFSchema;
ngOnInit(): void {
this.schema = {
properties: {
status: {
type: 'string',
title: '基本',
enum: [
{
title: 'parent 1',
key: '100',
expanded: true,
icon: 'smile',
children: [
{ title: 'leaf 1-0-0', key: '10010', icon: 'meh', isLeaf: true },
{ title: 'leaf 1-0-1', key: '10011', icon: 'frown', isLeaf: true },
],
},
],
default: '10010',
ui: {
widget: 'tree-select',
treeTemplate: this.customTpl,
} as SFTreeSelectWidgetSchema,
},
},
};
}
}
```