Drawer抽屉

抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

何时使用#

  • 当需要一个附加的面板来控制父窗体内容,这个面板在需要时呼出。比如,控制界面展示样式,往界面中添加内容。
  • 当需要在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。
import { NzDrawerModule } from 'ng-zorro-antd/drawer';

代码演示

基础抽屉,点击触发按钮抽屉从右滑出,点击遮罩区关闭

expand codeexpand code
      加载中
    

用于承载编辑相关操作,需要点击关闭按钮关闭。

expand codeexpand code
      加载中
    

在抽屉内打开新的抽屉,用以解决多分支任务的复杂状况。

expand codeexpand code
      加载中
    

抽屉的默认宽度为 378px,另外还提供一个大号抽屉 736px,可以用 size 属性来设置。

expand codeexpand code
      加载中
    

自定义位置,点击触发按钮抽屉从相应的位置滑出,点击遮罩区关闭

expand codeexpand code
      加载中
    

Lily

Progresser AFX

Lily

Progresser AFX

需要快速预览对象概要时使用,点击遮罩区关闭。

expand codeexpand code
      加载中
    
 

Drawer 的 service 用法,示例中演示了用户自定义模板、自定义component。

expand codeexpand code
      加载中
    

API#

nz-drawer#

参数说明类型默认值全局配置
[nzClosable]是否显示左上角的关闭按钮booleantrue
[nzCloseIcon]自定义关闭图标string | TemplateRef<void> | null'close'
[nzExtra]抽屉右上角的操作区域string | TemplateRef<void> | null-
[nzMaskClosable]点击蒙层是否允许关闭booleantrue
[nzMask]是否展示遮罩booleantrue
[nzCloseOnNavigation]当用户在历史中前进/后退时是否关闭抽屉组件。注意,这通常不包括点击链接(除非用户使用 HashLocationStrategy)。booleantrue
[nzMaskStyle]遮罩样式object{}
[nzKeyboard]是否支持键盘 esc 关闭booleantrue
[nzBodyStyle]Drawer body 样式object{}
[nzTitle]标题string | TemplateRef<void>-
[nzFooter]抽屉的页脚string | TemplateRef<void>-
[nzVisible]Drawer 是否可见,可以使用 [(nzVisible)] 双向绑定boolean-
[nzPlacement]抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
[nzSize]预设抽屉宽度(或高度),default 378px 和 large 736px'default' | 'large''default'
[nzWidth]宽度, 只在方向为 'right''left' 时生效,优先级高于 nzSizenumber | string-
[nzHeight]高度, 只在方向为 'top''bottom' 时生效,优先级高于 nzSizenumber | string-
[nzOffsetX]x 坐标移量(px), 只在方向为 'right''left' 时生效number0
[nzOffsetY]y 坐标移量(px), 高度, 只在方向为 'top''bottom' 时生效number0
[nzWrapClassName]对话框外层容器的类名string-
[nzZIndex]设置 Drawer 的 z-indexnumber1000
(nzOnClose)点击遮罩层或右上角叉的回调EventEmitter<MouseEvent>-

NzDrawerService#

方法名说明参数返回
create<T, D, R>创建并打开一个 DrawerNzDrawerOptions<T, D>NzDrawerRef<T, R>

NzDrawerOptions#

参数说明类型默认值全局配置
nzContentDrawer body 的内容TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> | Type<T>-
nzContentParams内容组件的输入参数 / Template 的 contextD-
nzOnCancel点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时,将自动关闭对话框(返回 false 可阻止关闭)() => Promise<any>-
nzClosable是否显示左上角的关闭按钮booleantrue
nzCloseIcon自定义关闭图标string | TemplateRef<void> | null'close'
nzExtra抽屉右上角的操作区域string | TemplateRef<void> | null-
nzMaskClosable点击蒙层是否允许关闭booleantrue
nzMask是否展示遮罩booleantrue
nzCloseOnNavigation当用户在历史中前进/后退时是否关闭抽屉组件。注意,这通常不包括点击链接(除非用户使用 HashLocationStrategy)。booleantrue
nzDirection文字方向'ltr' | 'rtl'-
nzKeyboard是否支持键盘 esc 关闭booleantrue
nzMaskStyle遮罩样式object{}
nzBodyStyleModal body 样式object{}
nzTitle标题string | TemplateRef<void>-
nzFooter页脚string | TemplateRef<void>-
nzSize预设抽屉宽度(或高度),default 378px 和 large 736px'default' | 'large''default'
nzWidth宽度, 只在方向为 'right''left' 时生效,优先级高于 nzSizenumber | string-
nzHeight高度, 只在方向为 'top''bottom' 时生效,优先级高于 nzSizenumber | string-
nzWrapClassName对话框外层容器的类名string-
nzZIndex设置 Drawer 的 z-indexnumber1000
nzPlacement抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
nzOffsetXx 坐标移量(px)number0
nzOffsetYy 坐标移量(px), 高度, 只在方向为 'top''bottom' 时生效number0

NzDrawerRef#

方法#

名称说明类型
close关闭 Drawer(result?: R) => void
open打开 Drawer() => void
getContentComponent返回 nzContent 为组件时的组件实例() => T | null

属性#

名称说明类型
afterOpen打开之后的回调Observable<void>
afterClose关闭之后的回调Observable<R>
nzClosable是否显示右上角的关闭按钮boolean
nzCloseIcon自定义关闭图标string | TemplateRef<void> | null
nzMaskClosable点击蒙层是否允许关闭boolean
nzMask是否展示遮罩boolean
nzMaskStyle遮罩样式object
nzKeyboard是否支持键盘 esc 关闭boolean
nzBodyStyleModal body 样式object
nzTitle标题string | TemplateRef<void>
nzWidth宽度number | string
nzHeight高度, 只在方向为 'top''bottom' 时生效number | string
nzWrapClassName对话框外层容器的类名string
nzZIndex设置 Drawer 的 z-indexnumber
nzPlacement抽屉的方向'top' | 'right' | 'bottom' | 'left'
nzOffsetXx 坐标移量(px)number
nzOffsetYy 坐标移量(px), 高度, 只在方向为 'top''bottom' 时生效number
Basic Drawer
Create
Cookbook
Food
default Drawer
 
Basic Drawer