Drawer抽屉

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

何时使用

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

单独引入此组件

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

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

代码演示

Drawer抽屉 - 图1

基础抽屉

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

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

Drawer抽屉 - 图2

对象编辑

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

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

Drawer抽屉 - 图3

多层抽屉

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

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

Drawer抽屉 - 图4

自定义位置

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

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

Drawer抽屉 - 图5

信息预览抽屉

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-drawer-user-profile',
  4. template: `
  5. <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
  6. <ng-template #item let-item>
  7. <nz-list-item [nzActions]="[viewAction]">
  8. <ng-template #viewAction>
  9. <a (click)="open()">View Profile</a>
  10. </ng-template>
  11. <nz-list-item-meta
  12. [nzTitle]="nzTitle"
  13. nzAvatar="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
  14. nzDescription="Progresser AFX"
  15. >
  16. <ng-template #nzTitle>
  17. <a href="https://ng.ant.design">{{ item.name }}</a>
  18. </ng-template>
  19. </nz-list-item-meta>
  20. </nz-list-item>
  21. </ng-template>
  22. </nz-list>
  23. <nz-drawer [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  24. <p class="title" style=" margin-bottom: 24px;">User Profile</p>
  25. <p class="title">Personal</p>
  26. <div nz-row>
  27. <div nz-col nzSpan="12">
  28. <div class="item-wrap">
  29. <p class="label">Full Name:</p>
  30. Lily
  31. </div>
  32. </div>
  33. <div nz-col nzSpan="12">
  34. <div class="item-wrap">
  35. <p class="label">Account:</p>
  36. AntDesign@example.com
  37. </div>
  38. </div>
  39. </div>
  40. <div nz-row>
  41. <div nz-col nzSpan="12">
  42. <div class="item-wrap">
  43. <p class="label">City:</p>
  44. HangZhou
  45. </div>
  46. </div>
  47. <div nz-col nzSpan="12">
  48. <div class="item-wrap">
  49. <p class="label">Country:</p>
  50. China🇨🇳
  51. </div>
  52. </div>
  53. </div>
  54. <div nz-row>
  55. <div nz-col nzSpan="12">
  56. <div class="item-wrap">
  57. <p class="label">Birthday:</p>
  58. February 2,1900
  59. </div>
  60. </div>
  61. <div nz-col nzSpan="12">
  62. <div class="item-wrap">
  63. <p class="label">Website:</p>
  64. -
  65. </div>
  66. </div>
  67. </div>
  68. <div nz-row>
  69. <div nz-col nzSpan="24">
  70. <div class="item-wrap">
  71. <p class="label">Message:</p>
  72. Make things as simple as possible but no simpler.
  73. </div>
  74. </div>
  75. </div>
  76. <nz-divider></nz-divider>
  77. <p class="title">Company</p>
  78. <div nz-row>
  79. <div nz-col nzSpan="12">
  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. }
  162. `
  163. ]
  164. })
  165. export class NzDemoDrawerUserProfileComponent {
  166. data = [
  167. {
  168. name: 'Lily'
  169. },
  170. {
  171. name: 'Lily'
  172. }
  173. ];
  174. visible = false;
  175. open(): void {
  176. this.visible = true;
  177. }
  178. close(): void {
  179. this.visible = false;
  180. }
  181. }

Drawer抽屉 - 图6

服务方式创建

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

注意 如果使用Component模式,则需要在NgModule中的 declarationsentryComponents 加入自定义的Component

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

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