feat(module:drawer): add drawer component (#1789)

close #1565
NG-ZORRO · Aug 3, 2018 · 33aff47 · 33aff47
1 parent 633bc87
commit 33aff47
Show file tree

Hide file tree

Showing 22 changed files with 1,145 additions and 0 deletions.
diff --git a/components/components.less b/components/components.less
@@ -13,6 +13,7 @@
 @import "./core/style/index.less";
 @import "./date-picker/style/index.less";
 @import "./divider/style/index.less";
+@import "./drawer/style/index";
 @import "./dropdown/style/index.less";
 @import "./form/style/index.less";
 @import "./grid/style/index.less";

diff --git a/components/drawer/demo/basic-left.md b/components/drawer/demo/basic-left.md
@@ -0,0 +1,15 @@
+---
+order: 1
+title:
+  zh-CN: 左侧滑出
+  en-US: Left Slider
+---
+
+## zh-CN
+
+基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
+
+## en-US
+
+Basic drawer.
+
diff --git a/components/drawer/demo/basic-left.ts b/components/drawer/demo/basic-left.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-drawer-basic-left',
+  template: `
+    <button nz-button nzType="primary" (click)="open()">Open</button>
+    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="left" nzTitle="Basic Drawer" (nzOnClose)="close()">
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </nz-drawer>
+  `
+})
+
+export class NzDemoDrawerBasicLeftComponent {
+
+  visible = false;
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+}
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基础抽屉
+  en-US: Basic
+---
+
+## zh-CN
+
+基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭
+
+## en-US
+
+Basic drawer.
diff --git a/components/drawer/demo/basic-right.ts b/components/drawer/demo/basic-right.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-drawer-basic-right',
+  template: `
+    <button nz-button nzType="primary" (click)="open()">Open</button>
+    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzTitle="Basic Drawer" (nzOnClose)="close()">
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </nz-drawer>
+  `
+})
+
+export class NzDemoDrawerBasicRightComponent {
+  visible = false;
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+}
diff --git a/components/drawer/demo/from-drawer.md b/components/drawer/demo/from-drawer.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 对象编辑
+  en-US: Edit item in drawer
+---
+
+## zh-CN
+
+用于承载编辑相关操作，需要点击关闭按钮关闭。
+
+## en-US
+
+A drawer containing an editable form which needs to be collapsed by clicking the close button.
diff --git a/components/drawer/demo/from-drawer.ts b/components/drawer/demo/from-drawer.ts
@@ -0,0 +1,106 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-drawer-from-drawer',
+  template: `
+    <button nz-button nzType="primary" (click)="open()">Create</button>
+    <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="false" [nzWidth]="720" [nzVisible]="visible" nzTitle="Create" (nzOnClose)="close()">
+      <form nz-form>
+        <div nz-row nzGutter="8">
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>Name</nz-form-label>
+              <nz-form-control>
+                <input nz-input placeholder="please enter user name">
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>Url</nz-form-label>
+              <nz-form-control>
+                <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
+                  <input type="text" nz-input placeholder="please enter url">
+                </nz-input-group>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+        <div nz-row nzGutter="8">
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>Owner</nz-form-label>
+              <nz-form-control>
+                <nz-select nzPlaceHolder="Please select an owner"></nz-select>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>Type</nz-form-label>
+              <nz-form-control>
+                <nz-select nzPlaceHolder="Please choose the type"></nz-select>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+        <div nz-row nzGutter="8">
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>Approver</nz-form-label>
+              <nz-form-control>
+                <nz-select nzPlaceHolder="Please choose the approver"></nz-select>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+          <div nz-col nzSpan="12">
+            <nz-form-item>
+              <nz-form-label>DateTime</nz-form-label>
+              <nz-form-control>
+                <nz-range-picker></nz-range-picker>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+        <div nz-row nzGutter="8">
+          <div nz-col nzSpan="24">
+            <nz-form-item>
+              <nz-form-label>Description</nz-form-label>
+              <nz-form-control>
+                <textarea nz-input placeholder="please enter url description" [nzAutosize]="{ minRows: 4, maxRows: 4 }"></textarea>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+      </form>
+      <div class="footer">
+        <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
+        <button type="button" (click)="close()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
+      </div>
+    </nz-drawer>
+  `,
+  styles: [`
+    .footer {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      border-top: 1px solid rgb(232, 232, 232);
+      padding: 10px 16px;
+      text-align: right;
+      left: 0px;
+      background: #fff;
+    }
+  `]
+})
+
+export class NzDemoDrawerFromDrawerComponent {
+  visible = false;
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+}
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+  zh-CN: 多层抽屉
+  en-US: Multi-level drawer
+---
+
+## zh-CN
+
+在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。
+
+## en-US
+
+Open a new drawer on top of an existing drawer to handle multi branch tasks
+
diff --git a/components/drawer/demo/multi-level-drawer.ts b/components/drawer/demo/multi-level-drawer.ts
@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-drawer-multi-level-drawer',
+  template: `
+    <button nz-button nzType="primary" (click)="open()">New Cookbook</button>
+    <nz-drawer [nzClosable]="false" [nzOffsetX]="childrenVisible ? 180 : 0" [nzWidth]="320" [nzVisible]="visible" nzTitle="Cookbook" (nzOnClose)="close()">
+      <form nz-form>
+        <div nz-row>
+          <div nz-col nzSpan="24">
+            <nz-form-item>
+              <nz-form-label>Name</nz-form-label>
+              <nz-form-control>
+                <input nz-input placeholder="please enter cookbook name">
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="24">
+            <nz-form-item>
+              <nz-form-label>Food</nz-form-label>
+              <nz-form-control>
+                <nz-tag>potato</nz-tag>
+                <nz-tag>eggplant</nz-tag>
+                <nz-tag (click)="openChildren()">+</nz-tag>
+              </nz-form-control>
+            </nz-form-item>
+          </div>
+        </div>
+      </form>
+      <div class="footer">
+        <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
+        <button type="button" (click)="close()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
+      </div>
+      <nz-drawer [nzClosable]="false" [nzVisible]="childrenVisible" nzTitle="Food" (nzOnClose)="closeChildren()">
+        <nz-list [nzDataSource]="vegetables" [nzRenderItem]="item">
+          <ng-template #item let-item>
+            <nz-list-item [nzContent]="item"></nz-list-item>
+          </ng-template>
+        </nz-list>
+      </nz-drawer>
+    </nz-drawer>
+  `,
+  styles: [`
+    .footer {
+      position: absolute;
+      bottom: 0px;
+      width: 100%;
+      border-top: 1px solid rgb(232, 232, 232);
+      padding: 10px 16px;
+      text-align: right;
+      left: 0px;
+      background: #fff;
+    }
+  `]
+})
+
+export class NzDemoDrawerMultiLevelDrawerComponent {
+  visible = false;
+  childrenVisible = false;
+
+  vegetables = ['asparagus', 'bamboo', 'potato', 'carrot', 'cilantro', 'potato', 'eggplant'];
+
+  open(): void {
+    this.visible = true;
+  }
+
+  close(): void {
+    this.visible = false;
+  }
+
+  openChildren(): void {
+    this.childrenVisible = true;
+  }
+
+  closeChildren(): void {
+    this.childrenVisible = false;
+  }
+}
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 信息预览抽屉
+  en-US: Preview drawer
+---
+
+## zh-CN
+
+需要快速预览对象概要时使用，点击遮罩区关闭。
+
+## en-US
+
+Use when you need to quickly preview the outline of the object. Such as list item preview.