Drawer

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.

When To Use#

  • Use a Form to create or edit a set of information.
  • Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
  • When a same Form is needed in multiple places.
import { NzDrawerModule } from 'ng-zorro-antd/drawer';

Examples

Basic drawer.

expand codeexpand code
      Loading...
    

A drawer containing an editable form which needs to be collapsed by clicking the close button.

expand codeexpand code
      Loading...
    

Open a new drawer on top of an existing drawer to handle multi branch tasks

expand codeexpand code
      Loading...
    

The default width (or height) of Drawer is 378px, and there is a presetted large size 736px.

expand codeexpand code
      Loading...
    

Basic drawer.

expand codeexpand code
      Loading...
    

Lily

Progresser AFX

Lily

Progresser AFX

Use when you need to quickly preview the outline of the object. Such as list item preview.

expand codeexpand code
      Loading...
    
 

Usage of Drawer's service, examples demonstrate user-defined templates, custom components.

expand codeexpand code
      Loading...
    

API#

nz-drawer#

PropsDescriptionTypeDefaultGlobal Config
[nzClosable]Whether a close (x) button is visible on top left of the Drawer dialog or not.booleantrue
[nzCloseIcon]Custom close iconstring | TemplateRef<void> | null'close'
[nzExtra]Extra actions area at corner.string | TemplateRef<void> | null-
[nzMask]Whether to show mask or not.booleantrue
[nzMaskClosable]Clicking on the mask (area outside the Drawer) to close the Drawer or not.booleantrue
[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).booleantrue
[nzKeyboard]Whether support press esc to closebooleantrue
[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>-
[nzFooter]The footer for Drawer.string | TemplateRef<void>-
[nzVisible]Whether the Drawer dialog is visible or not, you can use [(nzVisible)] two-way bindingbooleanfalse
[nzPlacement]The placement of the Drawer.'top' | 'right' | 'bottom' | 'left''right'
[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 X coordinate offset(px), only when placement is 'right' or 'left'.number0
[nzOffsetY]The Y coordinate offset(px), only when placement is 'top' or 'bottom'.number0
[nzWrapClassName]The class name of the container of the Drawer dialog.string-
[nzZIndex]The z-index of the Drawer.number1000
(nzOnClose)Specify a callback that will be called when a user clicks mask, close button or Cancel button.EventEmitter<MouseEvent>-

NzDrawerService#

MethodDescriptionParamsReturn
create<T, D, R>create and open an DrawerNzDrawerOptions<T, D>NzDrawerRef<T, R>

NzDrawerOptions#

ParamsDescriptionTypeDefaultGlobal Config
nzContentThe drawer body content.TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> | Type<T>-
nzContentParamsDeprecated: Use NzData instead. The component inputs the param / The Template contextD-
nzDataWill be a template variable when nzContent is TemplateRef.
object, will be the value of the injection token NZ_MODAL_DATA when nzContent is a component
D-
nzClosableWhether a close (x) button is visible on top left of the Drawer dialog or not.booleantrue
nzCloseIconCustom close iconstring | TemplateRef<void> | null'close'
nzExtraExtra actions area at corner.string | TemplateRef<void> | null-
nzOnCancelExecute 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>-
nzMaskClosableClicking on the mask (area outside the Drawer) to close the Drawer or not.booleantrue
nzCloseOnNavigationWhether 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).booleantrue
nzMaskWhether to show mask or not.booleantrue
nzDirectionDirection of the text in the modal'ltr' | 'rtl'-
nzKeyboardWhether support press esc to closebooleantrue
nzMaskStyleStyle for Drawer's mask element.object{}
nzBodyStyleBody style for modal body element. Such as height, padding etc.object{}
nzTitleThe title for Drawer.string | TemplateRef<void>-
nzFooterThe footer for Drawer.string | TemplateRef<void>-
nzSizePreset size of drawer, default 378px and large 736px.'default' | 'large''default'
nzWidthWidth of the Drawer dialog, only when placement is 'right' or 'left', having a higher priority than nzSize.number | string-
nzHeightHeight of the Drawer dialog, only when placement is 'top' or 'bottom', having a higher priority than nzSize.number | string-
nzWrapClassNameThe class name of the container of the Drawer dialog.string-
nzZIndexThe z-index of the Drawer.number1000
nzPlacementThe placement of the Drawer.'top' | 'right' | 'bottom' | 'left''right'
nzOffsetXThe X coordinate offset(px).number0
nzOffsetYThe Y coordinate offset(px), only when placement is 'top' or 'bottom'.number0

NZ_DRAWER_DATA#

NZ_DRAWER_DATA injection token is used to retrieve nzData in the custom component. The drawer created by the service method NzDrawerService.create() inject a NZ_DRAWER_DATA token (if nzContent is used as Component) to retrieve the parameters that have used to the 'nzContent component'

NzDrawerRef#

Methods#

NameDescriptionType
closeclose the drawer.(result?: R) => void
openopen the drawer.() => void
getContentComponentReturns the instance when nzContent is the component.() => T | null
getContentComponentRefReturns the reference of the component when nzContent is the component.() => ComponentRef<T> | null

Property#

NameDescriptionType
afterOpenCallback called after open.Observable<void>
afterCloseCallback called after close.Observable<R>
nzCloseIconCustom close iconstring | TemplateRef<void> | null
nzClosableWhether a close (x) button is visible on top right of the Drawer dialog or not.boolean
nzMaskClosableClicking on the mask (area outside the Drawer) to close the Drawer or not.boolean
nzMaskWhether to show mask or not.boolean
nzKeyboardWhether support press esc to closeboolean
nzMaskStyleStyle for Drawer's mask element.object
nzBodyStyleBody style for modal body element. Such as height, padding etc.object
nzTitleThe title for Drawer.string | TemplateRef<void>
nzFooterThe footer for Drawer.string | TemplateRef<void>
nzWidthWidth of the Drawer dialog.number | string
nzHeightHeight of the Drawer dialog, only when placement is 'top' or 'bottom'.number | string
nzWrapClassNameThe class name of the container of the Drawer dialog.string
nzZIndexThe z-index of the Drawer.number
nzPlacementThe placement of the Drawer.'top' | 'right' | 'bottom' | 'left'
nzOffsetXThe X coordinate offset(px).number
nzOffsetYThe Y coordinate offset(px), only when placement is 'top' or 'bottom'.number
Basic Drawer
Create
Cookbook
Food
default Drawer
 
Basic Drawer