• Drawer抽屉
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-drawercomponent
      • NzDrawerServiceservice
      • NzDrawerOptions
      • NzDrawerRef
        • 方法
        • 属性

    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') 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

    单独引入此组件

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

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

    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-
    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