diff --git a/components/drawer/demo/module b/components/drawer/demo/module
index 1148c6a19f..ac7fda9597 100644
--- a/components/drawer/demo/module
+++ b/components/drawer/demo/module
@@ -9,6 +9,7 @@ import { NzListModule } from 'ng-zorro-antd/list';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
export const moduleList = [
NzDrawerModule,
@@ -21,5 +22,6 @@ export const moduleList = [
NzListModule,
NzRadioModule,
NzDividerModule,
- NzDescriptionsModule
+ NzDescriptionsModule,
+ NzSpaceModule
];
diff --git a/components/drawer/demo/service.ts b/components/drawer/demo/service.ts
index 4275d234c2..da7f199f88 100644
--- a/components/drawer/demo/service.ts
+++ b/components/drawer/demo/service.ts
@@ -10,6 +10,7 @@ import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
value: {{ data?.value }}
+
@@ -35,6 +36,7 @@ export class NzDemoDrawerServiceComponent {
const drawerRef = this.drawerService.create({
nzTitle: 'Template',
nzFooter: 'Footer',
+ nzExtra: 'Extra',
nzContent: this.drawerTemplate,
nzContentParams: {
value: this.value
@@ -53,6 +55,8 @@ export class NzDemoDrawerServiceComponent {
openComponent(): void {
const drawerRef = this.drawerService.create
({
nzTitle: 'Component',
+ nzFooter: 'Footer',
+ nzExtra: 'Extra',
nzContent: NzDrawerCustomComponent,
nzContentParams: {
value: this.value
diff --git a/components/drawer/demo/size.md b/components/drawer/demo/size.md
new file mode 100644
index 0000000000..31bc90cb5e
--- /dev/null
+++ b/components/drawer/demo/size.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+ zh-CN: 预设宽度
+ en-US: Preset size
+---
+
+## zh-CN
+
+抽屉的默认宽度为 `378px`,另外还提供一个大号抽屉 `736px`,可以用 `size` 属性来设置。
+
+## en-US
+
+The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.
diff --git a/components/drawer/demo/size.ts b/components/drawer/demo/size.ts
new file mode 100644
index 0000000000..b651fefc6f
--- /dev/null
+++ b/components/drawer/demo/size.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-drawer-size',
+ template: `
+
+
+
+
+
+
+ Some contents...
+ Some contents...
+ Some contents...
+
+
+
+
+
+
+
+ `
+})
+export class NzDemoDrawerSizeComponent {
+ visible = false;
+ size: 'large' | 'default' = 'default';
+
+ get title(): string {
+ return `${this.size} Drawer`;
+ }
+
+ showDefault(): void {
+ this.size = 'default';
+ this.open();
+ }
+
+ showLarge(): void {
+ this.size = 'large';
+ this.open();
+ }
+
+ open(): void {
+ this.visible = true;
+ }
+
+ close(): void {
+ this.visible = false;
+ }
+}
diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md
index 747ee425eb..024d64c731 100755
--- a/components/drawer/doc/index.en-US.md
+++ b/components/drawer/doc/index.en-US.md
@@ -24,8 +24,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| Props | Description | Type | Default | Global Config |
| --- | --- | --- | --- | --- |
-| `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| `[nzClosable]` | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
| `[nzCloseIcon]` | Custom close icon | `string \| TemplateRef \| null` | `'close'` |
+| `[nzExtra]` | Extra actions area at corner. | `string \| TemplateRef \| null` | - |
| `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
| `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
| `[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';
| `[nzFooter]` | The footer for Drawer. | `string \| TemplateRef` | - |
| `[nzVisible]` | Whether the Drawer dialog is visible or not, you can use `[(nzVisible)]` two-way binding | `boolean` | `false` |
| `[nzPlacement]` | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`. | `number \| string` | `256` |
-| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number \| string` | `256` |
+| `[nzSize]` | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` |
+| `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - |
+| `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - |
| `[nzOffsetX]` | The the X coordinate offset(px), only when placement is `'right'` or `'left'`. | `number` | `0` |
| `[nzOffsetY]` | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` |
| `[nzWrapClassName]` | The class name of the container of the Drawer dialog. | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| --- | --- | --- | --- | --- |
| nzContent | The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type` | - |
| nzContentParams | The component inputs the param / The Template context. | `D` | - |
-| nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| nzClosable | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` |
| nzCloseIcon | Custom close icon | `string \| TemplateRef \| null` | `'close'` |
+| nzExtra | Extra actions area at corner. | `string \| TemplateRef \| null` | - |
| 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` | - |
| nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
| 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';
| nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
| nzTitle | The title for Drawer. | `string \| TemplateRef` | - |
| nzFooter | The footer for Drawer. | `string \| TemplateRef` | - |
-| nzWidth | Width of the Drawer dialog. | `number \| string` | `256` |
-| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number \| string` | `256` |
+| nzSize | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` |
+| nzWidth | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - |
+| nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - |
| nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
| nzZIndex| The `z-index` of the Drawer. | `number` | `1000` |
| nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md
index 58c4630468..6de0986b1a 100755
--- a/components/drawer/doc/index.zh-CN.md
+++ b/components/drawer/doc/index.zh-CN.md
@@ -23,8 +23,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| --- | --- | --- | --- | --- |
-| `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| `[nzClosable]` | 是否显示左上角的关闭按钮 | `boolean` | `true` |
| `[nzCloseIcon]` | 自定义关闭图标 | `string \| TemplateRef \| null` | `'close'` |
+| `[nzExtra]` | 抽屉右上角的操作区域 | `string \| TemplateRef \| null` | - |
| `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
| `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ |
| `[nzCloseOnNavigation]` | 当用户在历史中前进/后退时是否关闭抽屉组件。注意,这通常不包括点击链接(除非用户使用HashLocationStrategy)。 | `boolean` | `true` | ✅ |
@@ -35,8 +36,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| `[nzFooter]` | 抽屉的页脚 | `string \| TemplateRef` | - |
| `[nzVisible]` | Drawer 是否可见,可以使用 `[(nzVisible)]` 双向绑定 | `boolean` | - |
| `[nzPlacement]` | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
-| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效 | `number \| string` | `256` |
-| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
+| `[nzSize]` | 预设抽屉宽度(或高度),default `378px` 和 large `736px` | `'default' \| 'large'` | `'default'` |
+| `[nzWidth]` | 宽度, 只在方向为 `'right'`或`'left'` 时生效,优先级高于 `nzSize` | `number \| string` | - |
+| `[nzHeight]` | 高度, 只在方向为 `'top'`或`'bottom'` 时生效,优先级高于 `nzSize` | `number \| string` | - |
| `[nzOffsetX]` | x 坐标移量(px), 只在方向为 `'right'`或`'left'` 时生效 | `number` | `0` |
| `[nzOffsetY]` | y 坐标移量(px), 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number` | `0` |
| `[nzWrapClassName]` | 对话框外层容器的类名 | `string` | - |
@@ -56,8 +58,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| nzContent | Drawer body 的内容 | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type` | - |
| nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - |
| nzOnCancel | 点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时,将自动关闭对话框(返回false可阻止关闭) | `() => Promise` | - |
-| nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| nzClosable | 是否显示左上角的关闭按钮 | `boolean` | `true` |
| nzCloseIcon | 自定义关闭图标 | `string \| TemplateRef \| null` | `'close'` |
+| nzExtra | 抽屉右上角的操作区域 | `string \| TemplateRef \| null` | - |
| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
| nzMask | 是否展示遮罩 | `boolean` | `true` | ✅ |
| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭抽屉组件。注意,这通常不包括点击链接(除非用户使用HashLocationStrategy)。 | `boolean` | `true` | ✅ |
@@ -67,8 +70,9 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
| nzBodyStyle | Modal body 样式 | `object` | `{}` |
| nzTitle | 标题 | `string \| TemplateRef` | - |
| nzFooter | 页脚 | `string \| TemplateRef` | - |
-| nzWidth | 宽度 | `number \| string` | `256` |
-| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `number \| string` | `256` |
+| nzSize | 预设抽屉宽度(或高度),default `378px` 和 large `736px` | `'default' \| 'large'` | `'default'` |
+| nzWidth | 宽度, 只在方向为 `'right'`或`'left'` 时生效,优先级高于 `nzSize` | `number \| string` | - |
+| nzHeight | 高度, 只在方向为 `'top'`或`'bottom'` 时生效,优先级高于 `nzSize` | `number \| string` | - |
| nzWrapClassName | 对话框外层容器的类名 | `string` | - |
| nzZIndex| 设置 Drawer 的 `z-index` | `number` | `1000` |
| nzPlacement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
diff --git a/components/drawer/drawer-options.ts b/components/drawer/drawer-options.ts
index 38fff88c4e..a1fdfc63e1 100644
--- a/components/drawer/drawer-options.ts
+++ b/components/drawer/drawer-options.ts
@@ -10,7 +10,10 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzDrawerRef } from './drawer-ref';
+export const DRAWER_DEFAULT_SIZE = 378;
+export const DRAWER_LARGE_SIZE = 736;
export type NzDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type NzDrawerSize = 'default' | 'large';
export interface NzDrawerOptionsOfComponent {
nzClosable?: boolean;
@@ -21,12 +24,14 @@ export interface NzDrawerOptionsOfComponent {
nzKeyboard?: boolean;
nzNoAnimation?: boolean;
nzTitle?: string | TemplateRef<{}>;
+ nzExtra?: string | TemplateRef<{}>;
nzFooter?: string | TemplateRef<{}>;
nzContent?: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef }> | Type;
nzContentParams?: Partial;
nzMaskStyle?: object;
nzBodyStyle?: object;
nzWrapClassName?: string;
+ nzSize?: NzDrawerSize;
nzWidth?: number | string;
nzHeight?: number | string;
nzPlacement?: NzDrawerPlacement;
diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
index 91a63eff84..e00384b3fd 100644
--- a/components/drawer/drawer.component.ts
+++ b/components/drawer/drawer.component.ts
@@ -39,7 +39,13 @@ import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/ty
import { InputBoolean, toCssPixel } from 'ng-zorro-antd/core/util';
import { NzDrawerContentDirective } from './drawer-content.directive';
-import { NzDrawerOptionsOfComponent, NzDrawerPlacement } from './drawer-options';
+import {
+ DRAWER_DEFAULT_SIZE,
+ DRAWER_LARGE_SIZE,
+ NzDrawerOptionsOfComponent,
+ NzDrawerPlacement,
+ NzDrawerSize
+} from './drawer-options';
import { NzDrawerRef } from './drawer-ref';
export const DRAWER_ANIMATE_DURATION = 300;
@@ -98,6 +104,11 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
+
@@ -147,13 +158,15 @@ export class NzDrawerComponent
@Input() @InputBoolean() nzNoAnimation = false;
@Input() @InputBoolean() nzKeyboard: boolean = true;
@Input() nzTitle?: string | TemplateRef<{}>;
+ @Input() nzExtra?: string | TemplateRef<{}>;
@Input() nzFooter?: string | TemplateRef<{}>;
@Input() nzPlacement: NzDrawerPlacement = 'right';
+ @Input() nzSize: NzDrawerSize = 'default';
@Input() nzMaskStyle: NgStyleInterface = {};
@Input() nzBodyStyle: NgStyleInterface = {};
@Input() nzWrapClassName?: string;
- @Input() nzWidth: number | string = 256;
- @Input() nzHeight: number | string = 256;
+ @Input() nzWidth?: number | string;
+ @Input() nzHeight?: number | string;
@Input() nzZIndex = 1000;
@Input() nzOffsetX = 0;
@Input() nzOffsetY = 0;
@@ -226,11 +239,19 @@ export class NzDrawerComponent
}
get width(): string | null {
- return this.isLeftOrRight ? toCssPixel(this.nzWidth) : null;
+ if (this.isLeftOrRight) {
+ const defaultWidth = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+ return this.nzWidth === undefined ? toCssPixel(defaultWidth) : toCssPixel(this.nzWidth);
+ }
+ return null;
}
get height(): string | null {
- return !this.isLeftOrRight ? toCssPixel(this.nzHeight) : null;
+ if (!this.isLeftOrRight) {
+ const defaultHeight = this.nzSize === 'large' ? DRAWER_LARGE_SIZE : DRAWER_DEFAULT_SIZE;
+ return this.nzHeight === undefined ? toCssPixel(defaultHeight) : toCssPixel(this.nzHeight);
+ }
+ return null;
}
get isLeftOrRight(): boolean {
diff --git a/components/drawer/drawer.spec.ts b/components/drawer/drawer.spec.ts
index 3d1f8674b7..3bda30af34 100644
--- a/components/drawer/drawer.spec.ts
+++ b/components/drawer/drawer.spec.ts
@@ -260,6 +260,34 @@ describe('NzDrawerComponent', () => {
expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title')).toBe(null);
});
+ it('should not render title even with nzExtra', () => {
+ component.extra = 'test';
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title')).toBe(null);
+ });
+
+ it('should support string extra', () => {
+ component.closable = true;
+ component.extra = component.stringTitle;
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(
+ (overlayContainerElement.querySelector('.ant-drawer .ant-drawer-extra') as HTMLElement).innerText.trim()
+ ).toBe('test');
+ });
+
+ it('should support TemplateRef extra', () => {
+ component.closable = true;
+ component.extra = component.titleTemplateRef;
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-extra .custom-title')).not.toBe(null);
+ });
+
it('should support string title', () => {
component.title = component.stringTitle;
component.open();
@@ -350,6 +378,62 @@ describe('NzDrawerComponent', () => {
fixture.detectChanges();
});
+ it('should support large size width', () => {
+ component.size = 'large';
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(
+ (
+ overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content') as HTMLElement
+ ).getBoundingClientRect().width
+ ).toBe(736);
+ });
+
+ it('should custom width priority higher than size', () => {
+ component.size = 'large';
+ component.width = 520;
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(
+ (
+ overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content') as HTMLElement
+ ).getBoundingClientRect().width
+ ).toBe(520);
+ });
+
+ it('should support large size height', () => {
+ component.size = 'large';
+ component.placement = 'top';
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(
+ (
+ overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement
+ ).getBoundingClientRect().height
+ ).toBe(736);
+ component.placement = 'left';
+ fixture.detectChanges();
+ });
+
+ it('should custom height priority higher than size', () => {
+ component.size = 'large';
+ component.height = 520;
+ component.placement = 'top';
+ component.open();
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+ expect(
+ (
+ overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement
+ ).getBoundingClientRect().height
+ ).toBe(520);
+ component.placement = 'left';
+ fixture.detectChanges();
+ });
+
it('should nzWrapClassName work', () => {
component.open();
fixture.detectChanges();
@@ -700,11 +784,13 @@ describe('NzDrawerService', () => {
[nzClosable]="closable"
[nzMask]="showMask"
[nzVisible]="visible"
+ [nzSize]="size"
[nzWidth]="width"
[nzHeight]="height"
[nzPlacement]="placement"
[nzNoAnimation]="noAnimation"
[nzTitle]="title"
+ [nzExtra]="extra"
[nzFooter]="footer"
[nzOffsetX]="offsetX"
[nzOffsetY]="offsetY"
@@ -725,10 +811,12 @@ class NzTestDrawerComponent {
maskClosable = true;
showMask = true;
title: string | TemplateRef = '';
+ extra: string | TemplateRef = '';
footer: string | TemplateRef = '';
stringTitle = 'test';
- width: string | number = '300px';
- height: string | number = '300px';
+ size: 'large' | 'default' = 'default';
+ width?: string | number;
+ height?: string | number;
placement = 'left';
noAnimation = false;
closeIcon?: TemplateRef | string;