feat(module:select): support option height and opiton overflow size (#…

…5133) close #5112
NG-ZORRO · Apr 24, 2020 · 7b3937e · 7b3937e
1 parent d69415a
commit 7b3937e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
@@ -55,6 +55,8 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzLoading]` | indicate loading state | `boolean` | false |
 | `[nzMaxTagCount]` | Max tag count to show| `number` | - |
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - |
+| `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` |
+| `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` |
 | `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | dropdown expand change callback | `EventEmitter<boolean>` | `false` |
 | `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter<any>` | - |

diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
@@ -56,6 +56,8 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzLoading]` | 加载中状态 | `boolean` | `false` |
 | `[nzMaxTagCount]` | 最多显示多少个 tag | `number` | - |
 | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | `TemplateRef<{ $implicit: any[] }>` | - |
+| `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` |
+| `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` |
 | `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter<boolean>` | - |
 | `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter<any>` | - |

diff --git a/components/select/option-container.component.ts b/components/select/option-container.component.ts
@@ -81,13 +81,13 @@ export class NzOptionContainerComponent implements OnChanges, AfterViewInit {
   @Input() compareWith: (o1: NzSafeAny, o2: NzSafeAny) => boolean;
   @Input() mode: NzSelectModeType = 'default';
   @Input() matchWidth = true;
+  @Input() itemSize = 32;
+  @Input() maxItemLength = 8;
   @Input() listOfContainerItem: NzSelectItemInterface[] = [];
   @Output() readonly itemClick = new EventEmitter<NzSafeAny>();
   @Output() readonly scrollToBottom = new EventEmitter<void>();
   @ViewChild(CdkVirtualScrollViewport, { static: true }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
   private scrolledIndex = 0;
-  readonly itemSize = 32;
-  readonly maxItemLength = 8;
 
   onItemClick(value: NzSafeAny): void {
     this.itemClick.emit(value);

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -123,6 +123,8 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     >
       <nz-option-container
         [ngStyle]="nzDropdownStyle"
+        [itemSize]="nzOptionHeightPx"
+        [maxItemLength]="nzOptionOverflowSize"
         [matchWidth]="nzDropdownMatchSelectWidth"
         [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'"
         [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
@@ -170,6 +172,8 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   static ngAcceptInputType_nzOpen: BooleanInput;
 
   @Input() nzSize: NzSelectSizeType = 'default';
+  @Input() nzOptionHeightPx = 32;
+  @Input() nzOptionOverflowSize = 8;
   @Input() nzDropdownClassName: string | null = null;
   @Input() nzDropdownMatchSelectWidth = true;
   @Input() nzDropdownStyle: { [key: string]: string } | null = null;