Drawer抽屉

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

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

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

    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-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. export class NzDemoDrawerMultiLevelDrawerComponent {
    67.   visible = false;
    68.   childrenVisible = false;
    70.   vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
    72.   open(): void {
    73.     this.visible = true;
    74.   }
    76.   close(): void {
    77.     this.visible = false;
    78.   }
    80.   openChildren(): void {
    81.     this.childrenVisible = true;
    82.   }
    84.   closeChildren(): void {
    85.     this.childrenVisible = false;
    86.   }
    87. }

    Drawer抽屉 - 图4

    自定义位置

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

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

    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>
    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 class="item-wrap">
    81.             <p class="label">Position:</p>
    82.             Programmer
    83.           </div>
    84.         </div>
    85.         <div nz-col nzSpan="12">
    86.           <div class="item-wrap">
    87.             <p class="label">Responsibilities:</p>
    88.             Coding
    89.           </div>
    90.         </div>
    91.       </div>
    92.       <div nz-row>
    93.         <div nz-col nzSpan="12">
    94.           <div class="item-wrap">
    95.             <p class="label">Department:</p>
    96.             AFX
    97.           </div>
    98.         </div>
    99.         <div nz-col nzSpan="12">
    100.           <div class="item-wrap">
    101.             <p class="label">Supervisor:</p>
    102.             <a>Lin</a>
    103.           </div>
    104.         </div>
    105.       </div>
    106.       <div nz-row>
    107.         <div nz-col nzSpan="24">
    108.           <div class="item-wrap">
    109.             <p class="label">Skills:</p>
    110.             C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler
    111.             theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java,
    112.             ASP, etc.
    113.           </div>
    114.         </div>
    115.       </div>
    116.       <nz-divider></nz-divider>
    117.       <p class="title">Contacts</p>
    118.       <div nz-row>
    119.         <div nz-col nzSpan="12">
    120.           <div class="item-wrap">
    121.             <p class="label">Email:</p>
    122.             AntDesign@example.com
    123.           </div>
    124.         </div>
    125.         <div nz-col nzSpan="12">
    126.           <div class="item-wrap">
    127.             <p class="label">Phone Number:</p>
    128.             +86 181 0000 0000
    129.           </div>
    130.         </div>
    131.       </div>
    132.       <div nz-row>
    133.         <div nz-col nzSpan="24">
    134.           <div class="item-wrap">
    135.             <p class="label">Github:</p>
    136.             <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">github.com/NG-ZORRO/ng-zorro-antd</a>
    137.           </div>
    138.         </div>
    139.       </div>
    140.     </nz-drawer>
    141.   `,
    142.   styles: [
    143.     `
    144.       .title {
    145.         font-size: 16px;
    146.         color: rgba(0, 0, 0, 0.85);
    147.         line-height: 24px;
    148.         display: block;
    149.         margin-bottom: 16px;
    150.       }
    151.       .item-wrap {
    152.         font-size: 14px;
    153.         line-height: 22px;
    154.         margin-bottom: 7px;
    155.         color: rgba(0, 0, 0, 0.65);
    156.       }
    157.       .label {
    158.         margin-right: 8px;
    159.         display: inline-block;
    160.         color: rgba(0, 0, 0, 0.85);
    161.       }
    163.   ]
    164. })
    165. export class NzDemoDrawerUserProfileComponent {
    166.   data = [
    167.     {
    168.       name: 'Lily'
    169.     },
    170.     {
    171.       name: 'Lily'
    172.     }
    173.   ];
    175.   visible = false;
    177.   open(): void {
    178.     this.visible = true;
    179.   }
    181.   close(): void {
    182.     this.visible = false;
    183.   }

    服务方式创建

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

    方法

    属性