diff --git a/components/select/demo/custom-template.md b/components/select/demo/custom-template.md new file mode 100644 index 00000000000..19f0fc79b58 --- /dev/null +++ b/components/select/demo/custom-template.md @@ -0,0 +1,15 @@ +--- +order: 18 +title: + zh-CN: 自定义选择器内容 + en-US: Custom Select Template +--- + +## zh-CN + +通过 `nzCustomTemplate` 自定义 nz-select 显示的内容。 + +## en-US + +Custom the content of nz-select via `nzCustomTemplate`. + diff --git a/components/select/demo/custom-template.ts b/components/select/demo/custom-template.ts new file mode 100644 index 00000000000..602e4c37cf6 --- /dev/null +++ b/components/select/demo/custom-template.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-select-custom-template', + template: ` + + Windows + Mac + Android + + +
+ Label: {{selected.nzLabel}} +
+
+ Value: {{ selected.nzValue }} +
+ + ` +}) +export class NzDemoSelectCustomTemplateComponent { + selectedOS; +} diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 10aab11feda..5e1d432a2f0 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -33,6 +33,7 @@ Select component to select value from options. | `[nzDropdownClassName]` | className of dropdown menu | `string` | - | | `[nzDropdownMatchSelectWidth]` | Whether dropdown's with is same with select. | `boolean` | `true` | | `[nzDropdownStyle]` | style of dropdown menu | `object` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef` | - | | `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | | `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index c9524546ced..1cedd56c5ec 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -34,6 +34,7 @@ title: Select | `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string` | - | | `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | | `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | +| `[nzCustomTemplate]` | 自定义选择框的Template内容 | `TemplateRef` | - | | `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | | `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | | `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html index 29df8ab3f87..e4ef5d7ceb4 100644 --- a/components/select/nz-select-top-control.component.html +++ b/components/select/nz-select-top-control.component.html @@ -21,7 +21,12 @@ class="ant-select-selection-selected-value" [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel" [ngStyle]="selectedValueStyle"> - {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }} + + + + + {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }} +
; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef; diff --git a/components/select/nz-select.component.html b/components/select/nz-select.component.html index d0faae40c0b..f5bd566679c 100644 --- a/components/select/nz-select.component.html +++ b/components/select/nz-select.component.html @@ -10,13 +10,12 @@ [nzMaxTagCount]="nzMaxTagCount" [nzShowArrow]="nzShowArrow" [nzLoading]="nzLoading" + [nzCustomTemplate]="nzCustomTemplate" [nzSuffixIcon]="nzSuffixIcon" [nzClearIcon]="nzClearIcon" [nzRemoveIcon]="nzRemoveIcon" [nzShowSearch]="nzShowSearch" [nzTokenSeparators]="nzTokenSeparators" - [class.ant-select-selection--single]="nzSelectService.isSingleMode" - [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags" (keydown)="onKeyDown($event)">
{ expect(targetElement.style.width).toBe(''); expect(targetElement.style.minWidth).toBe('10px'); })); + it('should custom template work', () => { + select.nativeElement.click(); + fixture.detectChanges(); + expect(testComponent.open).toBe(true); + fixture.detectChanges(); + overlayContainerElement.querySelector('li').click(); + fixture.detectChanges(); + const selection = select.nativeElement.querySelector('.ant-select-selection') as HTMLElement; + expect(selection.textContent).toContain('Label: Jack Value: jack'); + }); it('should click option close dropdown', () => { testComponent.showSearch = true; select.nativeElement.click(); @@ -406,6 +416,7 @@ describe('nz-select component', () => { [nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth" [nzDropdownStyle]="dropdownStyle" [nzDropdownClassName]="'test-class'" + [nzCustomTemplate]="custom" (nzOnSearch)="onSearch($event)" [nzPlaceHolder]="placeholder" > @@ -413,6 +424,14 @@ describe('nz-select component', () => { + +
+ Label: {{selected.nzLabel}} +
+
+ Value: {{ selected.nzValue }} +
+ ` }) export class NzTestSelectDefaultComponent { diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts index fa134c83924..3660b0a51d8 100644 --- a/components/select/nz-select.component.ts +++ b/components/select/nz-select.component.ts @@ -108,6 +108,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie @Input() nzPlaceHolder: string; @Input() nzMaxTagCount: number; @Input() nzDropdownRender: TemplateRef; + @Input() nzCustomTemplate: TemplateRef; @Input() nzSuffixIcon: TemplateRef; @Input() nzClearIcon: TemplateRef; @Input() nzRemoveIcon: TemplateRef;