首页 > itarticle > Drawer

Drawer

admin 11月 13, 2020 0

API#

nz-drawercomponent#

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`
`[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`	✅
`[nzKeyboard]`	Whether support press esc to close	`boolean`	`true`
`[nzMaskStyle]`	Style for Drawer's mask element.	`object`	`{}`
`[nzBodyStyle]`	Body style for drawer body element. Such as height, padding etc.	`object`	`{}`
`[nzTitle]`	The title for Drawer.	`string \| TemplateRef<void>`	-
`[nzVisible]`	Whether the Drawer dialog is visible or not.	`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`
`[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`	-
`[nzZIndex]`	The `z-index` of the Drawer.	`number`	`1000`
`(nzOnClose)`	Specify a callback that will be called when a user clicks mask, close button or Cancel button.	`EventEmitter<MouseEvent>`	-

NzDrawerServiceservice#

Method	Description	Params	Return
create	create and open an Drawer	`NzDrawerOptions<T, D, R>`	`NzDrawerRef<R>`

NzDrawerOptions#

Params	Description	Type	Default
nzContent	The drawer body content.	`TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>`	-
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`
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>`	-
nzMaskClosable	Clicking on the mask (area outside the Drawer) to close the Drawer or not.	`boolean`	`true`
nzMask	Whether to show mask or not.	`boolean`	`true`
nzKeyboard	Whether support press esc to close	`boolean`	`true`
nzMaskStyle	Style for Drawer's mask element.	`object`	`{}`
nzBodyStyle	Body style for modal body element. Such as height, padding etc.	`object`	`{}`
nzTitle	The title for Drawer.	`string \| TemplateRef<void>`	-
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`
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'`
nzOffsetX	The the X coordinate offset(px).	`number`	`0`
nzOffsetY	The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`.	`number`	`0`

NzDrawerRef#

Methods#

Name	Description	Type
close	close the drawer.	`(result?: R) => void`
open	open the drawer.	`() => void`

Property#

Name	Description	Type
afterOpen	Callback called after open.	`Observable<void>`
afterClose	Callback called after close.	`Observable<R>`
nzClosable	Whether a close (x) button is visible on top right of the Drawer dialog or not.	`boolean`
nzMaskClosable	Clicking on the mask (area outside the Drawer) to close the Drawer or not.	`boolean`
nzMask	Whether to show mask or not.	`boolean`
nzKeyboard	Whether support press esc to close	`boolean`
nzMaskStyle	Style for Drawer's mask element.	`object`
nzBodyStyle	Body style for modal body element. Such as height, padding etc.	`object`
nzTitle	The title for Drawer.	`string \| TemplateRef<void>`
nzWidth	Width of the Drawer dialog.	`number \| string`
nzHeight	Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`.	`number \| string`
nzWrapClassName	The class name of the container of the Drawer dialog.	`string`
nzZIndex	The `z-index` of the Drawer.	`number`
nzPlacement	The placement of the Drawer.	`'top' \| 'right' \| 'bottom' \| 'left'`
nzOffsetX	The the X coordinate offset(px).	`number`
nzOffsetY	The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`.	`number`