From 8821ad0f151e36d97043f319c5f8d79fbcb31587 Mon Sep 17 00:00:00 2001
From: enochgao <enochgao@qq.com>
Date: Thu, 18 Jan 2024 10:57:50 +0800
Subject: [PATCH 1/2] fix(module:config): add itemsize config for tree select
table (#8347)
---
components/core/config/config.ts | 3 ++
components/select/select.component.ts | 2 +-
components/table/src/table/table.component.ts | 2 +-
components/tree/tree.component.ts | 2 +-
scripts/site/_site/doc/app/app.component.ts | 28 ++++++++++++++++---
5 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/components/core/config/config.ts b/components/core/config/config.ts
index 8830d605b1a..e2c377bb8da 100644
--- a/components/core/config/config.ts
+++ b/components/core/config/config.ts
@@ -93,6 +93,7 @@ export interface SelectConfig {
nzBorderless?: boolean;
nzSuffixIcon?: TemplateRef<NzSafeAny> | string | null;
nzBackdrop?: boolean;
+ nzOptionHeightPx?: number;
}
export interface AffixConfig {
@@ -295,6 +296,7 @@ export interface TableConfig {
nzShowSizeChanger?: boolean;
nzSimple?: boolean;
nzHideOnSinglePage?: boolean;
+ nzVirtualItemSize?: number;
}
export interface TabsConfig {
@@ -329,6 +331,7 @@ export interface TreeConfig {
nzBlockNode?: boolean;
nzShowIcon?: boolean;
nzHideUnMatched?: boolean;
+ nzVirtualItemSize?: number;
}
export interface TreeSelectConfig {
diff --git a/components/select/select.component.ts b/components/select/select.component.ts
index f50345605ac..3561e324cdf 100644
--- a/components/select/select.component.ts
+++ b/components/select/select.component.ts
@@ -231,7 +231,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
@Input() nzId: string | null = null;
@Input() nzSize: NzSelectSizeType = 'default';
@Input() nzStatus: NzStatus = '';
- @Input() nzOptionHeightPx = 32;
+ @Input() @WithConfig<number>() nzOptionHeightPx = 32;
@Input() nzOptionOverflowSize = 8;
@Input() nzDropdownClassName: string[] | string | null = null;
@Input() nzDropdownMatchSelectWidth = true;
diff --git a/components/table/src/table/table.component.ts b/components/table/src/table/table.component.ts
index 3691053cdf2..abd1528a40c 100644
--- a/components/table/src/table/table.component.ts
+++ b/components/table/src/table/table.component.ts
@@ -170,7 +170,7 @@ export class NzTableComponent<T> implements OnInit, OnDestroy, OnChanges, AfterV
@Input() nzFooter: string | TemplateRef<NzSafeAny> | null = null;
@Input() nzNoResult: string | TemplateRef<NzSafeAny> | undefined = undefined;
@Input() nzPageSizeOptions = [10, 20, 30, 40, 50];
- @Input() nzVirtualItemSize = 0;
+ @Input() @WithConfig() nzVirtualItemSize = 0;
@Input() nzVirtualMaxBufferPx = 200;
@Input() nzVirtualMinBufferPx = 100;
@Input() nzVirtualForTrackBy: TrackByFunction<T> = index => index;
diff --git a/components/tree/tree.component.ts b/components/tree/tree.component.ts
index 8842829e2b2..33484ee8c17 100644
--- a/components/tree/tree.component.ts
+++ b/components/tree/tree.component.ts
@@ -214,7 +214,7 @@ export class NzTreeComponent
@Input() @InputBoolean() nzDraggable: boolean = false;
@Input() @InputBoolean() nzMultiple = false;
@Input() nzExpandedIcon?: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>;
- @Input() nzVirtualItemSize = 28;
+ @Input() @WithConfig() nzVirtualItemSize = 28;
@Input() nzVirtualMaxBufferPx = 500;
@Input() nzVirtualMinBufferPx = 28;
@Input() nzVirtualHeight: string | null = null;
diff --git a/scripts/site/_site/doc/app/app.component.ts b/scripts/site/_site/doc/app/app.component.ts
index aa0bf55e599..cc6576d2660 100644
--- a/scripts/site/_site/doc/app/app.component.ts
+++ b/scripts/site/_site/doc/app/app.component.ts
@@ -12,6 +12,7 @@ import { environment } from '../environments/environment';
import { AppService } from './app.service';
import { ROUTER_LIST } from './router';
import { loadScript } from './utils/load-script';
+import { NzConfigService } from 'ng-zorro-antd/core/config';
interface DocPageMeta {
path: string;
@@ -85,9 +86,20 @@ export class AppComponent implements OnInit {
if (!this.platform.isBrowser) {
return;
}
+ if (theme === 'compact') {
+ this.nzConfigService.set('select', {
+ nzOptionHeightPx: 28
+ });
+ } else {
+ this.nzConfigService.set('select', {
+ nzOptionHeightPx: 32
+ });
+ }
let loading: NzMessageRef | null = null;
if (notification) {
- loading = this.nzMessageService.loading(this.language === 'en' ? `Switching theme...` : `切换主题中...`, { nzDuration: 0 });
+ loading = this.nzMessageService.loading(this.language === 'en' ? `Switching theme...` : `切换主题中...`, {
+ nzDuration: 0
+ });
}
this.renderer.addClass(this.document.activeElement, 'preload');
const successLoaded = () => {
@@ -142,6 +154,7 @@ export class AppComponent implements OnInit {
private meta: Meta,
private renderer: Renderer2,
private cdr: ChangeDetectorRef,
+ private nzConfigService: NzConfigService,
// tslint:disable-next-line:no-any
@Inject(DOCUMENT) private document: any
) {}
@@ -211,7 +224,11 @@ export class AppComponent implements OnInit {
} else {
this.updateMateTitle(`${currentDemoComponent.zh}(${currentDemoComponent.label}) | NG-ZORRO`);
}
- this.updateDocMetaAndLocale(currentDemoComponent.description, `${currentDemoComponent.label}, ${currentDemoComponent.zh}`, path);
+ this.updateDocMetaAndLocale(
+ currentDemoComponent.description,
+ `${currentDemoComponent.label}, ${currentDemoComponent.zh}`,
+ path
+ );
}
const currentIntroComponent = this.routerList.intro.find(component => `/${component.path}` === this.router.url);
@@ -292,7 +309,8 @@ export class AppComponent implements OnInit {
const isEn = this.language === 'en';
const enDescription =
'An enterprise-class UI design language and Angular-based implementation with a set of high-quality Angular components, one of best Angular UI library for enterprises';
- const zhDescription = 'Ant Design 的 Angular 实现，开发和服务于企业级后台产品，开箱即用的高质量 Angular UI 组件库。';
+ const zhDescription =
+ 'Ant Design 的 Angular 实现，开发和服务于企业级后台产品，开箱即用的高质量 Angular UI 组件库。';
let descriptionContent = isEn ? enDescription : zhDescription;
if (description) {
descriptionContent = description;
@@ -373,7 +391,9 @@ export class AppComponent implements OnInit {
if (!this.platform.isBrowser) {
return;
}
- const loading = this.nzMessageService.loading(this.language === 'en' ? `Switching color...` : `切换主题中...`, { nzDuration: 0 });
+ const loading = this.nzMessageService.loading(this.language === 'en' ? `Switching color...` : `切换主题中...`, {
+ nzDuration: 0
+ });
const changeColor = () => {
(window as any).less
.modifyVars({
From 1aa320cd4b49a8ea83fca611c2dbe501cc998a11 Mon Sep 17 00:00:00 2001
From: enochgao <enochgao@qq.com>
Date: Fri, 19 Jan 2024 18:28:26 +0800
Subject: [PATCH 2/2] docs(module:tree,select): add global config mark
---
components/select/doc/index.en-US.md | 2 +-
components/select/doc/index.zh-CN.md | 2 +-
components/table/doc/index.en-US.md | 2 +-
components/table/doc/index.zh-CN.md | 2 +-
components/tree-select/doc/index.en-US.md | 2 +-
components/tree-select/doc/index.zh-CN.md | 2 +-
components/tree-select/tree-select.component.ts | 2 +-
components/tree/doc/index.en-US.md | 2 +-
components/tree/doc/index.zh-CN.md | 2 +-
9 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
index 23d0fbaa947..71fdcdf5e6f 100644
--- a/components/select/doc/index.en-US.md
+++ b/components/select/doc/index.en-US.md
@@ -61,7 +61,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
| `[nzMaxTagCount]` | Max tag count to show | `number` | - |
| `[nzOptions]` | use nzOptions or `nz-option` to pass options to the select | `Array<{ label: string \| number \| TemplateRef<any>; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - |
-| `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` |
+| `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` | ✅
| `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` |
| `[nzSelectOnTab]` | Allows to select an item with TAB key | `boolean` | `false` |
| `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter<any[]>` | - |
diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
index b2247fc765d..e504ab77591 100644
--- a/components/select/doc/index.zh-CN.md
+++ b/components/select/doc/index.zh-CN.md
@@ -62,7 +62,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
| `[nzMaxTagCount]` | 最多显示多少个 tag | `number` | - |
| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | `TemplateRef<{ $implicit: any[] }>` | - |
| `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string \| number \| TemplateRef<any>; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
-| `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` |
+| `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` | ✅
| `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` |
| `[nzSelectOnTab]` | 允许使用 TAB 键选择项目 | `boolean` | `false` |
| `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter<any[]>` | - |
diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md
index 9a242e57dc1..f1351b99a83 100644
--- a/components/table/doc/index.en-US.md
+++ b/components/table/doc/index.en-US.md
@@ -92,7 +92,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula
| `[nzHideOnSinglePage]` | Whether to hide pagination on single page | `boolean` | `false` |
| `[nzSimple]` | Whether to use simple mode | `boolean` | - | ✅ |
| `[nzTemplateMode]` | Template mode，no need to pass data to `nzData` | `boolean` | `false` |
-| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` |
+| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` | ✅
| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` |
| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` |
| `[nzVirtualForTrackBy]` | The TrackByFunction to be used for tracking changes. | `TrackByFunction<T>` | - |
diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md
index 182c294b77e..2910b2e6c6d 100644
--- a/components/table/doc/index.zh-CN.md
+++ b/components/table/doc/index.zh-CN.md
@@ -93,7 +93,7 @@ Table 组件同时具备了易用性和高度可定制性
| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | ✅ |
| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ |
| `[nzTemplateMode]` | 模板模式，无需将数据传递给 `nzData` | `boolean` | `false` |
-| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` |
+| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` |✅
| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` |
| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` |
| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction<T>` | - |
diff --git a/components/tree-select/doc/index.en-US.md b/components/tree-select/doc/index.en-US.md
index ec7da948b63..39eabbaec07 100755
--- a/components/tree-select/doc/index.en-US.md
+++ b/components/tree-select/doc/index.en-US.md
@@ -50,7 +50,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
| `[nzTreeTemplate]` | Custom Nodes | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
| `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` |
-| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
+| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | ✅
| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` |
| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
diff --git a/components/tree-select/doc/index.zh-CN.md b/components/tree-select/doc/index.zh-CN.md
index eff16e822f7..4b5ed195874 100755
--- a/components/tree-select/doc/index.zh-CN.md
+++ b/components/tree-select/doc/index.zh-CN.md
@@ -50,7 +50,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
| `[nzTreeTemplate]` | 自定义节点 | `TemplateRef<{ $implicit: NzTreeNode }>` | - |
| `[nzVirtualHeight]` | 虚拟滚动的总高度 | `string` | `-` |
-| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
+| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` | ✅
| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `500` |
| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
index 10f5def94c7..dd4cf031809 100644
--- a/components/tree-select/tree-select.component.ts
+++ b/components/tree-select/tree-select.component.ts
@@ -283,7 +283,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
@Input() @InputBoolean() nzMultiple = false;
@Input() @InputBoolean() nzDefaultExpandAll = false;
@Input() @InputBoolean() nzCheckStrictly = false;
- @Input() nzVirtualItemSize = 28;
+ @Input() @WithConfig() nzVirtualItemSize = 28;
@Input() nzVirtualMaxBufferPx = 500;
@Input() nzVirtualMinBufferPx = 28;
@Input() nzVirtualHeight: string | null = null;
diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
index 5721b48c115..21f076084b5 100644
--- a/components/tree/doc/index.en-US.md
+++ b/components/tree/doc/index.en-US.md
@@ -42,7 +42,7 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
| `[nzSearchFunc]` | Custom matching method, used with nzSearchValue | `(node: NzTreeNodeOptions) => boolean` | `null` |
| `[nzBeforeDrop]` | Drop before the second check, allowing the user to decide whether to allow placement | `(confirm: NzFormatBeforeDropEvent) => Observable<boolean>` | - |
| `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` |
-| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
+| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | ✅
| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` |
| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` |
| `(nzClick)` | Callback function for when the user clicks a treeNode | `EventEmitter<NzFormatEmitEvent>` | - |
diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
index b062cc54a0a..00ada339df5 100644
--- a/components/tree/doc/index.zh-CN.md
+++ b/components/tree/doc/index.zh-CN.md
@@ -43,7 +43,7 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
| `[nzSearchFunc]` | 自定义匹配方法，配合 nzSearchValue 使用 | `(node: NzTreeNodeOptions) => boolean` | `null` |
| `[nzBeforeDrop]` | drop 前二次校验,允许用户自行决定是否允许放置 | `(confirm: NzFormatBeforeDropEvent) => Observable<boolean>` | - |
| `[nzVirtualHeight]` | 虚拟滚动的总高度 | `string` | `-` |
-| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
+| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` | ✅
| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `500` |
| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `28` |
| `(nzClick)` | 点击树节点触发 | `EventEmitter<NzFormatEmitEvent>` | - |