Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
335 additions
and
48 deletions.
There are no files selected for viewing
90 changes: 90 additions & 0 deletions
90
packages/form/src/widgets/select/demo/custom-dropdown-menu.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| --- | ||
| order: 2 | ||
| title: | ||
| zh-CN: 扩展菜单 | ||
| en-US: Custom dropdown | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 使用 `dropdownRender` 对下拉菜单进行自由扩展。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Customize the dropdown menu via `dropdownRender`. | ||
|
|
||
| ```ts | ||
| import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; | ||
| import { SFComponent, SFSchema, SFSelectWidgetSchema } from '@delon/form'; | ||
| import { NzMessageService } from 'ng-zorro-antd/message'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-demo', | ||
| template: ` | ||
| <sf #sf *ngIf="schema" [schema]="schema" (formSubmit)="submit($event)"></sf> | ||
| <ng-template #dropdownRender> | ||
| <nz-divider></nz-divider> | ||
| <div class="container"> | ||
| <input type="text" nz-input #inputElement /> | ||
| <a class="add-item" (click)="addItem(inputElement)"><i nz-icon nzType="plus"></i> Add item</a> | ||
| </div> | ||
| </ng-template> | ||
| `, | ||
| styles: [ | ||
| ` | ||
| nz-divider { | ||
| margin: 4px 0; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| padding: 8px; | ||
| } | ||
| input { | ||
| } | ||
| .add-item { | ||
| flex: 0 0 auto; | ||
| padding: 8px; | ||
| display: block; | ||
| } | ||
| `, | ||
| ], | ||
| }) | ||
| export class DemoComponent implements OnInit { | ||
| @ViewChild('sf', { static: false }) private sf: SFComponent; | ||
| @ViewChild('dropdownRender', { static: true }) private dropdownRender!: TemplateRef<void>; | ||
|
|
||
| schema: SFSchema; | ||
| statusList: string[] = ['1', '2', '3']; | ||
|
|
||
| constructor(private msg: NzMessageService) {} | ||
|
|
||
| submit(value: any) { | ||
| this.msg.success(JSON.stringify(value)); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.schema = { | ||
| properties: { | ||
| status: { | ||
| type: 'string', | ||
| title: '状态', | ||
| enum: this.statusList, | ||
| default: '1', | ||
| ui: { | ||
| widget: 'select', | ||
| dropdownRender: this.dropdownRender, | ||
| } as SFSelectWidgetSchema, | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| addItem(input: HTMLInputElement): void { | ||
| this.statusList.push(input.value); | ||
| const statusProperty = this.sf.getProperty('/status')!; | ||
| statusProperty.schema.enum = this.statusList; | ||
| this.sf.setValue('/status', input.value); | ||
| } | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
packages/form/src/widgets/tree-select/demo/customized-icon.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| order: 4 | ||
| debug: true | ||
| title: | ||
| zh-CN: 自定义图标 | ||
| en-US: Customize Icon | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 可以针对不同节点采用样式覆盖的方式定制图标。 | ||
|
|
||
| ## en-US | ||
|
|
||
| You can customize icons for different nodes. | ||
|
|
||
| ```ts | ||
| import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; | ||
| import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form'; | ||
| import { NzTreeNode } from 'ng-zorro-antd/tree'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-demo', | ||
| template: ` | ||
| <sf *ngIf="schema" [schema]="schema"></sf> | ||
| <ng-template #customTpl let-node> | ||
| <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, | ||
| }, | ||
| }, | ||
| }; | ||
| } | ||
| } | ||
| ``` |
Oops, something went wrong.