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 [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" (nzOnClose)="close()">
    8.       <p>Some contents...</p>
    9.       <p>Some contents...</p>
    10.       <p>Some contents...</p>
    11.     </nz-drawer>
    12.   `
    13. })
    14. export class NzDemoDrawerBasicRightComponent {
    15.   visible = false;
    17.   open(): void {
    18.     this.visible = true;
    19.   }
    21.   close(): void {
    22.     this.visible = false;
    23.   }
    24. }

    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-form-control>
    34.             </nz-form-item>
    35.           </div>
    36.         </div>
    37.       </form>
    38.       <nz-drawer [nzClosable]="false" [nzVisible]="childrenVisible" nzTitle="Food" (nzOnClose)="closeChildren()">
    39.         <nz-list [nzDataSource]="vegetables" [nzRenderItem]="item">
    40.           <ng-template #item let-item>
    41.             <nz-list-item [nzContent]="item"></nz-list-item>
    42.           </ng-template>
    43.         </nz-list>
    44.       </nz-drawer>
    45.     </nz-drawer>
    46.   `
    47. })
    48. export class NzDemoDrawerMultiLevelDrawerComponent {
    49.   visible = false;
    50.   childrenVisible = false;
    52.   vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
    54.   open(): void {
    55.     this.visible = true;
    56.   }
    58.   close(): void {
    59.     this.visible = false;
    60.   }
    62.   openChildren(): void {
    63.     this.childrenVisible = true;
    64.   }
    66.   closeChildren(): void {
    67.     this.childrenVisible = false;
    68.   }
    69. }

    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"
    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.       <nz-descriptions [nzColumn]="2" nzTitle="Personal">
    27.         <nz-descriptions-item nzTitle="Full Name" [nzSpan]="1">Lily</nz-descriptions-item>
    28.         <nz-descriptions-item nzTitle="Account" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
    29.         <nz-descriptions-item nzTitle="City" [nzSpan]="1">HangZhou</nz-descriptions-item>
    30.         <nz-descriptions-item nzTitle="Country" [nzSpan]="1">China🇨🇳</nz-descriptions-item>
    31.         <nz-descriptions-item nzTitle="Website" [nzSpan]="1"> - </nz-descriptions-item>
    32.         <nz-descriptions-item nzTitle="Message" [nzSpan]="2">
    33.           Make things as simple as possible but no simpler.
    34.         </nz-descriptions-item>
    35.       </nz-descriptions>
    36.       <nz-divider></nz-divider>
    37.       <nz-descriptions [nzColumn]="2" nzTitle="Company">
    38.         <nz-descriptions-item nzTitle="Position" [nzSpan]="1">Programmer</nz-descriptions-item>
    39.         <nz-descriptions-item nzTitle="Responsibilities" [nzSpan]="1">Coding</nz-descriptions-item>
    40.         <nz-descriptions-item nzTitle="Department" [nzSpan]="1">AFX</nz-descriptions-item>
    41.         <nz-descriptions-item nzTitle="Supervisor" [nzSpan]="1">Lin</nz-descriptions-item>
    42.         <nz-descriptions-item nzTitle="Skills" [nzSpan]="2">
    43.           C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer
    44.           architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
    45.         </nz-descriptions-item>
    46.       </nz-descriptions>
    47.       <nz-divider></nz-divider>
    48.       <nz-descriptions [nzColumn]="2" nzTitle="Contacts">
    49.         <nz-descriptions-item nzTitle="Email" [nzSpan]="1">AntDesign@example.com</nz-descriptions-item>
    50.         <nz-descriptions-item nzTitle="Phone Number" [nzSpan]="1">+86 181 0000 0000</nz-descriptions-item>
    51.         <nz-descriptions-item nzTitle="Github" [nzSpan]="2">
    52.           <a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">github.com/NG-ZORRO/ng-zorro-antd</a>
    53.         </nz-descriptions-item>
    54.       </nz-descriptions>
    55.     </nz-drawer>
    56.   `,
    57.   styles: [
    58.     `
    59.       .title {
    60.         font-size: 16px;
    61.         color: rgba(0, 0, 0, 0.85);
    62.         line-height: 24px;
    63.         display: block;
    64.         margin-bottom: 16px;
    65.       }
    66.       .item-wrap {
    67.         font-size: 14px;
    68.         line-height: 22px;
    69.         margin-bottom: 7px;
    70.         color: rgba(0, 0, 0, 0.65);
    71.       }
    72.       .label {
    73.         margin-right: 8px;
    74.         display: inline-block;
    75.         color: rgba(0, 0, 0, 0.85);
    76.       }
    77.     `
    78.   ]
    79. })
    80. export class NzDemoDrawerUserProfileComponent {
    81.   data = [
    82.     {
    83.       name: 'Lily'
    84.     },
    85.     {
    86.       name: 'Lily'
    87.     }
    88.   ];
    90.   visible = false;
    92.   open(): void {
    93.     this.visible = true;
    94.   }
    96.   close(): void {
    97.     this.visible = false;
    98. }

    Drawer抽屉 - 图6

    服务方式创建

    方法

    属性