Drawer抽屉

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

何时使用

  • 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
  • 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzDrawerModule } from 'ng-zorro-antd/drawer';

代码演示

Drawer抽屉 - 图1

基础抽屉

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-drawer-basic-right',
  5.   template: `
  6.     <button nz-button nzType="primary" (click)="open()">Open</button>
  7.     <nz-drawer
  8.       [nzClosable]="false"
  9.       [nzVisible]="visible"
  10.       nzPlacement="right"
  11.       nzTitle="Basic Drawer"
  12.       (nzOnClose)="close()"
  13.     >
  14.       <p>Some contents...</p>
  15.       <p>Some contents...</p>
  16.       <p>Some contents...</p>
  17.     </nz-drawer>
  18.   `
  19. })
  20. export class NzDemoDrawerBasicRightComponent {
  21.   visible = false;
  23.   open(): void {
  24.     this.visible = true;
  25.   }
  27.   close(): void {
  28.     this.visible = false;
  29.   }
  30. }

Drawer抽屉 - 图2

对象编辑

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-drawer-from-drawer',
  5.   template: `
  6.     <button nz-button nzType="primary" (click)="open()">Create</button>
  7.     <nz-drawer
  8.       [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
  9.       [nzMaskClosable]="false"
  10.       [nzWidth]="720"
  11.       [nzVisible]="visible"
  12.       nzTitle="Create"
  13.       (nzOnClose)="close()"
  14.     >
  15.       <form nz-form>
  16.         <div nz-row nzGutter="8">
  17.           <div nz-col nzSpan="12">
  18.             <nz-form-item>
  19.               <nz-form-label>Name</nz-form-label>
  20.               <nz-form-control>
  21.                 <input nz-input placeholder="please enter user name" />
  22.               </nz-form-control>
  23.             </nz-form-item>
  24.           </div>
  25.           <div nz-col nzSpan="12">
  26.             <nz-form-item>
  27.               <nz-form-label>Url</nz-form-label>
  28.               <nz-form-control>
  29.                 <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
  30.                   <input type="text" nz-input placeholder="please enter url" />
  31.                 </nz-input-group>
  32.               </nz-form-control>
  33.             </nz-form-item>
  34.           </div>
  35.         </div>
  36.         <div nz-row nzGutter="8">
  37.           <div nz-col nzSpan="12">
  38.             <nz-form-item>
  39.               <nz-form-label>Owner</nz-form-label>
  40.               <nz-form-control>
  41.                 <nz-select nzPlaceHolder="Please select an owner"></nz-select>
  42.               </nz-form-control>
  43.             </nz-form-item>
  44.           </div>
  45.           <div nz-col nzSpan="12">
  46.             <nz-form-item>
  47.               <nz-form-label>Type</nz-form-label>
  48.               <nz-form-control>
  49.                 <nz-select nzPlaceHolder="Please choose the type"></nz-select>
  50.               </nz-form-control>
  51.             </nz-form-item>
  52.           </div>
  53.         </div>
  54.         <div nz-row nzGutter="8">
  55.           <div nz-col nzSpan="12">
  56.             <nz-form-item>
  57.               <nz-form-label>Approver</nz-form-label>
  58.               <nz-form-control>
  59.                 <nz-select nzPlaceHolder="Please choose the approver"></nz-select>
  60.               </nz-form-control>
  61.             </nz-form-item>
  62.           </div>
  63.           <div nz-col nzSpan="12">
  64.             <nz-form-item>
  65.               <nz-form-label>DateTime</nz-form-label>
  66.               <nz-form-control>
  67.                 <nz-range-picker></nz-range-picker>
  68.               </nz-form-control>
  69.             </nz-form-item>
  70.           </div>
  71.         </div>
  72.         <div nz-row nzGutter="8">
  73.           <div nz-col nzSpan="24">
  74.             <nz-form-item>
  75.               <nz-form-label>Description</nz-form-label>
  76.               <nz-form-control>
  77.                 <textarea
  78.                   nz-input
  79.                   placeholder="please enter url description"
  80.                   [nzAutosize]="{ minRows: 4, maxRows: 4 }"
  81.                 ></textarea>
  82.               </nz-form-control>
  83.             </nz-form-item>
  84.           </div>
  85.         </div>
  86.       </form>
  87.       <div class="footer">
  88.         <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
  89.         <button type="button" (click)="close()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
  90.       </div>
  91.     </nz-drawer>
  92.   `,
  93.   styles: [
  94.     `
  95.       .footer {
  96.         position: absolute;
  97.         bottom: 0px;
  98.         width: 100%;
  99.         border-top: 1px solid rgb(232, 232, 232);
  100.         padding: 10px 16px;
  101.         text-align: right;
  102.         left: 0px;
  103.         background: #fff;
  104.       }
  105.     `
  106.   ]
  107. })
  108. export class NzDemoDrawerFromDrawerComponent {
  109.   visible = false;
  111.   open(): void {
  112.     this.visible = true;
  113.   }
  115.   close(): void {
  116.     this.visible = false;
  117.   }
  118. }

Drawer抽屉 - 图3

多层抽屉

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-drawer-multi-level-drawer',
  5.   template: `
  6.     <button nz-button nzType="primary" (click)="open()">New Cookbook</button>
  7.     <nz-drawer
  8.       [nzClosable]="false"
  9.       [nzOffsetX]="childrenVisible ? 180 : 0"
  10.       [nzWidth]="320"
  11.       [nzVisible]="visible"
  12.       nzTitle="Cookbook"
  13.       (nzOnClose)="close()"
  14.     >
  15.       <form nz-form>
  16.         <div nz-row>
  17.           <div nz-col nzSpan="24">
  18.             <nz-form-item>
  19.               <nz-form-label>Name</nz-form-label>
  20.               <nz-form-control>
  21.                 <input nz-input placeholder="please enter cookbook name" />
  22.               </nz-form-control>
  23.             </nz-form-item>
  24.           </div>
  25.         </div>
  26.         <div nz-row>
  27.           <div nz-col nzSpan="24">
  28.             <nz-form-item>
  29.               <nz-form-label>Food</nz-form-label>
  30.               <nz-form-control>
  31.                 <nz-tag>potato</nz-tag>
  32.                 <nz-tag>eggplant</nz-tag>
  33.                 <nz-tag (click)="openChildren()">+</nz-tag>
  34.               </nz-form-control>
  35.             </nz-form-item>
  36.           </div>
  37.         </div>
  38.       </form>
  39.       <div class="footer">
  40.         <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
  41.         <button type="button" (click)="close()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
  42.       </div>
  43.       <nz-drawer [nzClosable]="false" [nzVisible]="childrenVisible" nzTitle="Food" (nzOnClose)="closeChildren()">
  44.         <nz-list [nzDataSource]="vegetables" [nzRenderItem]="item">
  45.           <ng-template #item let-item>
  46.             <nz-list-item [nzContent]="item"></nz-list-item>
  47.           </ng-template>
  48.         </nz-list>
  49.       </nz-drawer>
  50.     </nz-drawer>
  51.   `,
  52.   styles: [
  53.     `
  54.       .footer {
  55.         position: absolute;
  56.         bottom: 0px;
  57.         width: 100%;
  58.         border-top: 1px solid rgb(232, 232, 232);
  59.         padding: 10px 16px;
  60.         text-align: right;
  61.         left: 0px;
  62.         background: #fff;
  63.       }
  64.     `
  65.   ]
  66. })
  67. export class NzDemoDrawerMultiLevelDrawerComponent {
  68.   visible = false;
  69.   childrenVisible = false;
  71.   vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
  73.   open(): void {
  74.     this.visible = true;
  75.   }
  77.   close(): void {
  78.     this.visible = false;
  79.   }
  81.   openChildren(): void {
  82.     this.childrenVisible = true;
  83.   }
  85.   closeChildren(): void {
  86.     this.childrenVisible = false;
  87.   }
  88. }

Drawer抽屉 - 图4

自定义位置

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-drawer-placement',
  5.   template: `
  6.     <nz-radio-group [(ngModel)]="placement">
  7.       <label nz-radio nzValue="top">top</label>
  8.       <label nz-radio nzValue="right">right</label>
  9.       <label nz-radio nzValue="bottom">bottom</label>
  10.       <label nz-radio nzValue="left">left</label>
  11.     </nz-radio-group>
  12.     <button nz-button nzType="primary" (click)="open()">Open</button>
  13.     <nz-drawer
  14.       [nzClosable]="false"
  15.       [nzVisible]="visible"
  16.       [nzPlacement]="placement"
  17.       nzTitle="Basic Drawer"
  18.       (nzOnClose)="close()"
  19.     >
  20.       <p>Some contents...</p>
  21.       <p>Some contents...</p>
  22.       <p>Some contents...</p>
  23.     </nz-drawer>
  24.   `
  25. })
  26. export class NzDemoDrawerPlacementComponent {
  27.   visible = false;
  28.   placement = 'left';
  29.   open(): void {
  30.     this.visible = true;
  31.   }
  33.   close(): void {
  34.     this.visible = false;
  35.   }
  36. }

Drawer抽屉 - 图5

信息预览抽屉

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-drawer-user-profile',
  5.   template: `
  6.     <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
  7.       <ng-template #item let-item>
  8.         <nz-list-item [nzActions]="[viewAction]">
  9.           <ng-template #viewAction>
  10.             <a (click)="open()">View Profile</a>
  11.           </ng-template>
  12.           <nz-list-item-meta
  13.             [nzTitle]="nzTitle"
  14.             nzAvatar="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
  15.             nzDescription="Progresser AFX"
  16.           >
  17.             <ng-template #nzTitle>
  18.               <a href="https://ng.ant.design">{{ item.name }}</a>
  19.             </ng-template>
  20.           </nz-list-item-meta>
  21.         </nz-list-item>
  22.       </ng-template>
  23.     </nz-list>
  24.     <nz-drawer [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  25.       <p class="title" style=" margin-bottom: 24px;">User Profile</p>
  26.       <p class="title">Personal</p>
  27.       <div nz-row>
  28.         <div nz-col nzSpan="12">
  29.           <div class="item-wrap">
  30.             <p class="label">Full Name:</p>
  31.             Lily
  32.           </div>
  33.         </div>
  34.         <div nz-col nzSpan="12">
  35.           <div class="item-wrap">
  36.             <p class="label">Account:</p>
  37.             AntDesign@example.com
  38.           </div>
  39.         </div>
  40.       </div>
  41.       <div nz-row>
  42.         <div nz-col nzSpan="12">
  43.           <div class="item-wrap">
  44.             <p class="label">City:</p>
  45.             HangZhou
  46.           </div>
  47.         </div>
  48.         <div nz-col nzSpan="12">
  49.           <div class="item-wrap">
  50.             <p class="label">Country:</p>
  51.             China🇨🇳
  52.           </div>
  53.         </div>
  54.       </div>
  55.       <div nz-row>
  56.         <div nz-col nzSpan="12">
  57.           <div class="item-wrap">
  58.             <p class="label">Birthday:</p>
  59.             February 2,1900
  60.           </div>
  61.         </div>
  62.         <div nz-col nzSpan="12">
  63.           <div class="item-wrap">
  64.             <p class="label">Website:</p>
  65.             -
  66.           </div>
  67.         </div>
  68.       </div>
  69.       <div nz-row>
  70.         <div nz-col nzSpan="24">
  71.           <div class="item-wrap">
  72.             <p class="label">Message:</p>
  73.             Make things as simple as possible but no simpler.
  74.           </div>
  75.         </div>
  76.       </div>
  77.       <nz-divider></nz-divider>
  78.       <p class="title">Company</p>
  79.       <div nz-row>
  80.         <div nz-col nzSpan="12">
  81.           <div class="item-wrap">
  82.             <p class="label">Position:</p>
  83.             Programmer
  84.           </div>
  85.         </div>
  86.         <div nz-col nzSpan="12">
  87.           <div class="item-wrap">
  88.             <p class="label">Responsibilities:</p>
  89.             Coding
  90.           </div>
  91.         </div>
  92.       </div>
  93.       <div nz-row>
  94.         <div nz-col nzSpan="12">
  95.           <div class="item-wrap">
  96.             <p class="label">Department:</p>
  97.             AFX
  98.           </div>
  99.         </div>
  100.         <div nz-col nzSpan="12">
  101.           <div class="item-wrap">
  102.             <p class="label">Supervisor:</p>
  103.             <a>Lin</a>
  104.           </div>
  105.         </div>
  106.       </div>
  107.       <div nz-row>
  108.         <div nz-col nzSpan="24">
  109.           <div class="item-wrap">
  110.             <p class="label">Skills:</p>
  111.             C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler
  112.             theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java,
  113.             ASP, etc.
  114.           </div>
  115.         </div>
  116.       </div>
  117.       <nz-divider></nz-divider>
  118.       <p class="title">Contacts</p>
  119.       <div nz-row>
  120.         <div nz-col nzSpan="12">
  121.           <div class="item-wrap">
  122.             <p class="label">Email:</p>
  123.             AntDesign@example.com
  124.           </div>
  125.         </div>
  126.         <div nz-col nzSpan="12">
  127.           <div class="item-wrap">
  128.             <p class="label">Phone Number:</p>
  129.             +86 181 0000 0000
  130.           </div>
  131.         </div>
  132.       </div>
  133.       <div nz-row>
  134.         <div nz-col nzSpan="24">
  135.           <div class="item-wrap">
  136.             <p class="label">Github:</p>
  137.             <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">github.com/NG-ZORRO/ng-zorro-antd</a>
  138.           </div>
  139.         </div>
  140.       </div>
  141.     </nz-drawer>
  142.   `,
  143.   styles: [
  144.     `
  145.       .title {
  146.         font-size: 16px;
  147.         color: rgba(0, 0, 0, 0.85);
  148.         line-height: 24px;
  149.         display: block;
  150.         margin-bottom: 16px;
  151.       }
  152.       .item-wrap {
  153.         font-size: 14px;
  154.         line-height: 22px;
  155.         margin-bottom: 7px;
  156.         color: rgba(0, 0, 0, 0.65);
  157.       }
  158.       .label {
  159.         margin-right: 8px;
  160.         display: inline-block;
  161.         color: rgba(0, 0, 0, 0.85);
  162.       }
  163.     `
  164.   ]
  165. })
  166. export class NzDemoDrawerUserProfileComponent {
  167.   data = [
  168.     {
  169.       name: 'Lily'
  170.     },
  171.     {
  172.       name: 'Lily'
  173.     }
  174.   ];
  176.   visible = false;
  178.   open(): void {
  179.     this.visible = true;
  180.   }
  182.   close(): void {
  183.     this.visible = false;
  184.   }
  185. }

Drawer抽屉 - 图6

服务方式创建

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

注意 如果使用Component模式，则需要在NgModule中的 declarations 和 entryComponents 加入自定义的Component

  1. /* entryComponents: NzDrawerCustomComponent */
  3. import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
  4. import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd';
  6. @Component({
  7.   selector: 'nz-demo-drawer-service',
  8.   template: `
  9.     <ng-template #drawerTemplate let-data let-drawerRef="drawerRef">
  10.       value: {{ data?.value }}
  11.       <br />
  12.       <button nz-button nzType="primary" (click)="drawerRef.close()">close</button>
  13.     </ng-template>
  14.     <div nz-form>
  15.       <nz-form-item>
  16.         <input nz-input [(ngModel)]="value" />
  17.       </nz-form-item>
  18.     </div>
  19.     <button nz-button nzType="primary" (click)="openTemplate()">Use Template</button>&nbsp;
  20.     <button nz-button nzType="primary" (click)="openComponent()">Use Component</button>
  21.   `
  22. })
  23. export class NzDemoDrawerServiceComponent {
  24.   @ViewChild('drawerTemplate', { static: false }) drawerTemplate: TemplateRef<{
  25.     $implicit: { value: string };
  26.     drawerRef: NzDrawerRef<any>;
  27.   }>;
  28.   value = 'ng';
  30.   constructor(private drawerService: NzDrawerService) {}
  32.   openTemplate(): void {
  33.     const drawerRef = this.drawerService.create({
  34.       nzTitle: 'Template',
  35.       nzContent: this.drawerTemplate,
  36.       nzContentParams: {
  37.         value: this.value
  38.       }
  39.     });
  41.     drawerRef.afterOpen.subscribe(() => {
  42.       console.log('Drawer(Template) open');
  43.     });
  45.     drawerRef.afterClose.subscribe(() => {
  46.       console.log('Drawer(Template) close');
  47.     });
  48.   }
  50.   openComponent(): void {
  51.     const drawerRef = this.drawerService.create<NzDrawerCustomComponent, { value: string }, string>({
  52.       nzTitle: 'Component',
  53.       nzContent: NzDrawerCustomComponent,
  54.       nzContentParams: {
  55.         value: this.value
  56.       }
  57.     });
  59.     drawerRef.afterOpen.subscribe(() => {
  60.       console.log('Drawer(Component) open');
  61.     });
  63.     drawerRef.afterClose.subscribe(data => {
  64.       console.log(data);
  65.       if (typeof data === 'string') {
  66.         this.value = data;
  67.       }
  68.     });
  69.   }
  70. }
  72. @Component({
  73.   selector: 'nz-drawer-custom-component',
  74.   template: `
  75.     <div>
  76.       <input nz-input [(ngModel)]="value" />
  77.       <nz-divider></nz-divider>
  78.       <button nzType="primary" (click)="close()" nz-button>Confirm</button>
  79.     </div>
  80.   `
  81. })
  82. export class NzDrawerCustomComponent {
  83.   @Input() value = '';
  85.   constructor(private drawerRef: NzDrawerRef<string>) {}
  87.   close(): void {
  88.     this.drawerRef.close(this.value);
  89.   }
  90. }

API

nz-drawercomponent

参数说明类型默认值
[nzClosable]是否显示右上角的关闭按钮booleantrue
[nzMaskClosable]点击蒙层是否允许关闭booleantrue
[nzMask]是否展示遮罩booleantrue
[nzMaskStyle]遮罩样式object{}
[nzBodyStyle]Drawer body 样式object{}
[nzTitle]标题string | TemplateRef<void>-
[nzVisible]Drawer 是否可见boolean-
[nzPlacement]抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
[nzWidth]宽度, 只在方向为 'right'或'left' 时生效number | string256
[nzHeight]高度, 只在方向为 'top'或'bottom' 时生效number | string256
[nzOffsetX]x 坐标移量(px), 只在方向为 'right'或'left' 时生效number0
[nzOffsetY]y 坐标移量(px), 高度, 只在方向为 'top'或'bottom' 时生效number0
[nzWrapClassName]对话框外层容器的类名string-
[nzZIndex]设置 Drawer 的 z-indexnumber1000
(nzOnClose)点击遮罩层或右上角叉的回调EventEmitter<MouseEvent>-

NzDrawerServiceservice

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

NzDrawerOptions

参数说明类型默认值
nzContentDrawer body 的内容TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> | Type<T>-
nzContentParams内容组件的输入参数 / Template的 contextD-
nzOnCancel点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时，将自动关闭对话框（返回false可阻止关闭）() => Promise<any>-
nzClosable是否显示右上角的关闭按钮booleantrue
nzMaskClosable点击蒙层是否允许关闭booleantrue
nzMask是否展示遮罩booleantrue
nzMaskStyle遮罩样式object{}
nzBodyStyleModal body 样式object{}
nzTitle标题string | TemplateRef<void>-
nzWidth宽度number | string256
nzHeight高度, 只在方向为 'top'或'bottom' 时生效number | string256
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

属性

名称说明类型
afterOpen打开之后的回调Observable<void>
afterClose关闭之后的回调Observable<R>
nzClosable是否显示右上角的关闭按钮booleantrue
nzMaskClosable点击蒙层是否允许关闭booleantrue
nzMask是否展示遮罩booleantrue
nzMaskStyle遮罩样式object{}
nzBodyStyleModal body 样式object{}
nzTitle标题string | TemplateRef<void>-
nzWidth宽度number | string256
nzHeight高度, 只在方向为 'top'或'bottom' 时生效number | string256
nzWrapClassName对话框外层容器的类名string-
nzZIndex设置 Drawer 的 z-indexnumber1000
nzPlacement抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
nzOffsetXx 坐标移量(px)number0
nzOffsetYy 坐标移量(px), 高度, 只在方向为 'top'或'bottom' 时生效number0