Skip to content

Commit d2e5b76

Browse files
yangjunhanyangjunhan
authored
feat(module:drawer): support new apis nzSize and nzExtra (#7227)
1 parent 72da774 commit d2e5b76

File tree

9 files changed

+218
-20
lines changed

9 files changed

+218
-20
lines changed

‎components/drawer/demo/module‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { NzListModule } from 'ng-zorro-antd/list';
99
import { NzRadioModule } from 'ng-zorro-antd/radio';
1010
import { NzDividerModule } from 'ng-zorro-antd/divider';
1111
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
12+
import { NzSpaceModule } from 'ng-zorro-antd/space';
1213

1314
export const moduleList = [
1415
NzDrawerModule,
@@ -21,5 +22,6 @@ export const moduleList = [
2122
NzListModule,
2223
NzRadioModule,
2324
NzDividerModule,
24-
NzDescriptionsModule
25+
NzDescriptionsModule,
26+
NzSpaceModule
2527
];

‎components/drawer/demo/service.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
1010
<ng-template #drawerTemplate let-data let-drawerRef="drawerRef">
1111
value: {{ data?.value }}
1212
<br />
13+
<br />
1314
<button nz-button nzType="primary" (click)="drawerRef.close()">close</button>
1415
</ng-template>
1516
<div nz-form>
@@ -35,6 +36,7 @@ export class NzDemoDrawerServiceComponent {
3536
const drawerRef = this.drawerService.create({
3637
nzTitle: 'Template',
3738
nzFooter: 'Footer',
39+
nzExtra: 'Extra',
3840
nzContent: this.drawerTemplate,
3941
nzContentParams: {
4042
value: this.value
@@ -53,6 +55,8 @@ export class NzDemoDrawerServiceComponent {
5355
openComponent(): void {
5456
const drawerRef = this.drawerService.create<NzDrawerCustomComponent, { value: string }, string>({
5557
nzTitle: 'Component',
58+
nzFooter: 'Footer',
59+
nzExtra: 'Extra',
5660
nzContent: NzDrawerCustomComponent,
5761
nzContentParams: {
5862
value: this.value

‎components/drawer/demo/size.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 6
3+
title:
4+
zh-CN: 预设宽度
5+
en-US: Preset size
6+
---
7+
8+
## zh-CN
9+
10+
抽屉的默认宽度为 `378px`，另外还提供一个大号抽屉 `736px`，可以用 `size` 属性来设置。
11+
12+
## en-US
13+
14+
The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.

‎components/drawer/demo/size.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-drawer-size',
5+
template: `
6+
<nz-space>
7+
<button *nzSpaceItem nz-button nzType="primary" (click)="showDefault()">Open Default Size (378px)</button>
8+
<button *nzSpaceItem nz-button nzType="primary" (click)="showLarge()">Open Large Size (736px)</button>
9+
</nz-space>
10+
<nz-drawer
11+
[nzSize]="size"
12+
[nzVisible]="visible"
13+
nzPlacement="right"
14+
[nzTitle]="title"
15+
[nzExtra]="extra"
16+
(nzOnClose)="close()"
17+
>
18+
<ng-container *nzDrawerContent>
19+
<p>Some contents...</p>
20+
<p>Some contents...</p>
21+
<p>Some contents...</p>
22+
</ng-container>
23+
</nz-drawer>
24+
<ng-template #extra>
25+
<button nz-button nzType="default" (click)="close()">Cancel</button>
26+
&nbsp;
27+
<button nz-button nzType="primary" (click)="close()">OK</button>
28+
</ng-template>
29+
`
30+
})
31+
export class NzDemoDrawerSizeComponent {
32+
visible = false;
33+
size: 'large' | 'default' = 'default';
34+
35+
get title(): string {
36+
return `${this.size} Drawer`;
37+
}
38+
39+
showDefault(): void {
40+
this.size = 'default';
41+
this.open();
42+
}
43+
44+
showLarge(): void {
45+
this.size = 'large';
46+
this.open();
47+
}
48+
49+
open(): void {
50+
this.visible = true;
51+
}
52+
53+
close(): void {
54+
this.visible = false;
55+
}
56+
}

‎components/drawer/doc/index.en-US.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
2424

2525
| Props | Description | Type | Default | Global Config |
2626
| --- | --- | --- | --- | --- |
27-
| `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
27+
| `[nzClosable]` | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
2828
| `[nzCloseIcon]` | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
29+
| `[nzExtra]` | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
2930
| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
3031
| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
3132
| `[nzCloseOnNavigation]` | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
@@ -36,8 +37,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
3637
| `[nzFooter]` | The footer for Drawer. | `string \| TemplateRef<void>` | - |
3738
| `[nzVisible]` | Whether the Drawer dialog is visible or not, you can use `[(nzVisible)]` two-way binding | `boolean` | `false` |
3839
| `[nzPlacement]` | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
39-
| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`. | `number \| string` | `256` |
40-
| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number \| string` | `256` |
40+
| `[nzSize]` | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` |
41+
| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - |
42+
| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - |
4143
| `[nzOffsetX]` | The the X coordinate offset(px), only when placement is `'right'` or `'left'`. | `number` | `0` |
4244
| `[nzOffsetY]` | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` |
4345
| `[nzWrapClassName]` | The class name of the container of the Drawer dialog. | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
5658
| --- | --- | --- | --- | --- |
5759
| nzContent | The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>` | - |
5860
| nzContentParams | The component inputs the param / The Template context. | `D` | - |
59-
| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
61+
| nzClosable | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
6062
| nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
63+
| nzExtra | Extra actions area at corner. | `string \| TemplateRef<void> \| null` | - |
6164
| nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
6265
| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
6366
| nzCloseOnNavigation | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ |
@@ -68,8 +71,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
6871
| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
6972
| nzTitle | The title for Drawer. | `string \| TemplateRef<void>` | - |
7073
| nzFooter | The footer for Drawer. | `string \| TemplateRef<void>` | - |
71-
| nzWidth | Width of the Drawer dialog. | `number \| string` | `256` |
72-
| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number \| string` | `256` |
74+
| nzSize | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` |
75+
| nzWidth | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - |
76+
| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - |
7377
| nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
7478
| nzZIndex| The `z-index` of the Drawer. | `number` | `1000` |
7579
| nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |

‎components/drawer/doc/index.zh-CN.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
2323

2424
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
2525
| --- | --- | --- | --- | --- |
26-
| `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
26+
| `[nzClosable]` | 是否显示左上角的关闭按钮 | `boolean` | `true` |
2727
| `[nzCloseIcon]` | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
28+
| `[nzExtra]` | 抽屉右上角的操作区域 | `string \| TemplateRef<void> \| null` | - |
2829
| `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
2930
| `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ |
3031
| `[nzCloseOnNavigation]` | 当用户在历史中前进/后退时是否关闭抽屉组件。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | ✅ |
@@ -35,8 +36,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
3536
| `[nzFooter]` | 抽屉的页脚 | `string \| TemplateRef<void>` | - |
3637
| `[nzVisible]` | Drawer 是否可见，可以使用 `[(nzVisible)]` 双向绑定 | `boolean` | - |
3738
| `[nzPlacement]` | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
38-
| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效 | `number \| string` | `256` |
39-
| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
39+
| `[nzSize]` | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | `'default' \| 'large'` | `'default'` |
40+
| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
41+
| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
4042
| `[nzOffsetX]` | x 坐标移量(px), 只在方向为 `'right'`或`'left'` 时生效 | `number` | `0` |
4143
| `[nzOffsetY]` | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` |
4244
| `[nzWrapClassName]` | 对话框外层容器的类名 | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
5658
| nzContent | Drawer body 的内容 | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>` | - |
5759
| nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - |
5860
| nzOnCancel | 点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时，将自动关闭对话框（返回false可阻止关闭） | `() => Promise<any>` | - |
59-
| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
61+
| nzClosable | 是否显示左上角的关闭按钮 | `boolean` | `true` |
6062
| nzCloseIcon | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
63+
| nzExtra | 抽屉右上角的操作区域 | `string \| TemplateRef<void> \| null` | - |
6164
| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
6265
| nzMask | 是否展示遮罩 | `boolean` | `true` | ✅ |
6366
| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭抽屉组件。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | ✅ |
@@ -67,8 +70,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
6770
| nzBodyStyle | Modal body 样式 | `object` | `{}` |
6871
| nzTitle | 标题 | `string \| TemplateRef<void>` | - |
6972
| nzFooter | 页脚 | `string \| TemplateRef<void>` | - |
70-
| nzWidth | 宽度 | `number \| string` | `256` |
71-
| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
73+
| nzSize | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | `'default' \| 'large'` | `'default'` |
74+
| nzWidth | 宽度, 只在方向为 `'right'`或`'left'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
75+
| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效，优先级高于 `nzSize` | `number \| string` | - |
7276
| nzWrapClassName | 对话框外层容器的类名 | `string` | - |
7377
| nzZIndex| 设置 Drawer 的 `z-index` | `number` | `1000` |
7478
| nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |

‎components/drawer/drawer-options.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
1010

1111
import { NzDrawerRef } from './drawer-ref';
1212

13+
export const DRAWER_DEFAULT_SIZE = 378;
14+
export const DRAWER_LARGE_SIZE = 736;
1315
export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
16+
export type NzDrawerSize = 'default' | 'large';
1417

1518
export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
1619
nzClosable?: boolean;
@@ -21,12 +24,14 @@ export interface NzDrawerOptionsOfComponent<T = NzSafeAny, D = NzSafeAny> {
2124
nzKeyboard?: boolean;
2225
nzNoAnimation?: boolean;
2326
nzTitle?: string | TemplateRef<{}>;
27+
nzExtra?: string | TemplateRef<{}>;
2428
nzFooter?: string | TemplateRef<{}>;
2529
nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type<T>;
2630
nzContentParams?: Partial<T & D>;
2731
nzMaskStyle?: object;
2832
nzBodyStyle?: object;
2933
nzWrapClassName?: string;
34+
nzSize?: NzDrawerSize;
3035
nzWidth?: number | string;
3136
nzHeight?: number | string;
3237
nzPlacement?: NzDrawerPlacement;

‎components/drawer/drawer.component.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,13 @@ import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/ty
3939
import { InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
4040

4141
import { NzDrawerContentDirective } from './drawer-content.directive';
42-
import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './drawer-options';
42+
import {
43+
DRAWER_DEFAULT_SIZE,
44+
DRAWER_LARGE_SIZE,
45+
NzDrawerOptionsOfComponent,
46+
NzDrawerPlacement,
47+
NzDrawerSize
48+
} from './drawer-options';
4349
import { NzDrawerRef } from './drawer-ref';
4450

4551
export const DRAWER_ANIMATE_DURATION = 300;
@@ -98,6 +104,11 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
98104
</ng-container>
99105
</div>
100106
</div>
107+
<div *ngIf="nzExtra" class="ant-drawer-extra">
108+
<ng-container *nzStringTemplateOutlet="nzExtra">
109+
<div [innerHTML]="nzExtra"></div>
110+
</ng-container>
111+
</div>
101112
</div>
102113
<div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
103114
<ng-template cdkPortalOutlet></ng-template>
@@ -147,13 +158,15 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
147158
@Input() @InputBoolean() nzNoAnimation = false;
148159
@Input() @InputBoolean() nzKeyboard: boolean = true;
149160
@Input() nzTitle?: string | TemplateRef<{}>;
161+
@Input() nzExtra?: string | TemplateRef<{}>;
150162
@Input() nzFooter?: string | TemplateRef<{}>;
151163
@Input() nzPlacement: NzDrawerPlacement = 'right';
164+
@Input() nzSize: NzDrawerSize = 'default';
152165
@Input() nzMaskStyle: NgStyleInterface = {};
153166
@Input() nzBodyStyle: NgStyleInterface = {};
154167
@Input() nzWrapClassName?: string;
155-
@Input() nzWidth: number | string = 256;
156-
@Input() nzHeight: number | string = 256;
168+
@Input() nzWidth?: number | string;
169+
@Input() nzHeight?: number | string;
157170
@Input() nzZIndex = 1000;
158171
@Input() nzOffsetX = 0;
159172
@Input() nzOffsetY = 0;
@@ -226,11 +239,19 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
226239
}
227240

228241
get width(): string | null {
229-
return this.isLeftOrRight ? toCssPixel(this.nzWidth) : null;
242+
if (this.isLeftOrRight) {
243+
const defaultWidth = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
244+
return this.nzWidth === undefined ? toCssPixel(defaultWidth) : toCssPixel(this.nzWidth);
245+
}
246+
return null;
230247
}
231248

232249
get height(): string | null {
233-
return !this.isLeftOrRight ? toCssPixel(this.nzHeight) : null;
250+
if (!this.isLeftOrRight) {
251+
const defaultHeight = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
252+
return this.nzHeight === undefined ? toCssPixel(defaultHeight) : toCssPixel(this.nzHeight);
253+
}
254+
return null;
234255
}
235256

236257
get isLeftOrRight(): boolean {

0 commit comments

Comments
 (0)