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;