feat(module:menu): support unfolds/folds & add demo and api docs (#225)

* feat(module:menu): support unfolds/folds & add demo and api docs * fix(module:menu): revert index.less close #206
NG-ZORRO · Sep 9, 2017 · 23b73bb · 23b73bb
1 parent 248c7e5
commit 23b73bb
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 0 deletions.
diff --git a/src/components/menu/nz-menu.component.ts b/src/components/menu/nz-menu.component.ts
@@ -25,9 +25,35 @@ export class NzMenuComponent implements OnChanges, AfterViewInit {
   subMenus = [];
   /** view init flat */
   isInit = false;
+  /** temporary mode */
+  _tempMode: NzMode;
+  /** opened index of array */
+  _subMenusOpenIndex = [];
+  /** nzInlineCollapsed */
+  _nzInlineCollapsed = false;
+
   @Input() nzMode: NzMode = 'vertical';
   @Input() nzTheme: 'light' | 'dark' = 'light';
   @Input() nzClickActive = true;
+  @Input()
+  get nzInlineCollapsed(): boolean {
+    return this._nzInlineCollapsed;
+  }
+  set nzInlineCollapsed(state: boolean) {
+    this._nzInlineCollapsed = state;
+    if (!this.isInit) {
+      return
+    }
+    if (this._nzInlineCollapsed) {
+      this.hideSubMenus();
+      // after the animation is over
+      setTimeout(() => this.nzMode = 'vertical', 150)
+    } else {
+      this.reductionSubMenus();
+      this.nzMode = this._tempMode;
+    }
+
+  }
 
   /** define host class */
   @HostBinding('class.ant-dropdown-menu')
@@ -78,6 +104,11 @@ export class NzMenuComponent implements OnChanges, AfterViewInit {
     return (!this.isInDropDown) && (this.nzMode === 'inline');
   }
 
+  @HostBinding('class.ant-menu-inline-collapsed')
+  get setMenuInlineCollapsedClass() {
+    return (!this.isInDropDown) && (this.nzMode !== 'horizontal') && this.nzInlineCollapsed;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     for (const propName in changes) {
       if (propName === 'nzMode') {
@@ -93,13 +124,29 @@ export class NzMenuComponent implements OnChanges, AfterViewInit {
 
   ngAfterViewInit() {
     this.isInit = true;
+    this._tempMode = this.nzMode;
   }
 
   /** trigger when menu item clicked */
   clearAllSelected() {
     this.menuItems.forEach(menu => menu.nzSelected = false);
   }
 
+  hideSubMenus() {
+    this._subMenusOpenIndex = [];
+    this.subMenus.forEach((submenu, index) => {
+      if (submenu.nzOpen) {
+        this._subMenusOpenIndex.push(index)
+      }
+      submenu.nzOpen = false;
+    });
+  }
+
+  reductionSubMenus() {
+    this._subMenusOpenIndex.forEach(i => this.subMenus[i].nzOpen = true);
+    this._subMenusOpenIndex = [];
+  }
+
   /** api for dropdown or navigation to set isInDropDown status */
   setDropDown(value: boolean) {
     setTimeout(_ => {

diff --git a/src/showcase/nz-demo-menu/nz-demo-menu-collapsed.component.ts b/src/showcase/nz-demo-menu/nz-demo-menu-collapsed.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-menu-collapsed',
+  template: `
+    <div  style="width: 240px;">
+      <button nz-button [nzType]="'primary'"
+              (click)="toggleCollapsed()"
+              style="margin-bottom: 10px;">
+        <i class="anticon"
+           [class.anticon-menu-unfold]="isCollapsed"
+           [class.anticon-menu-fold]="!isCollapsed">
+        </i>
+      </button>
+      <ul nz-menu [nzMode]="'inline'" nzTheme='dark' [nzInlineCollapsed]="isCollapsed">
+        <li nz-menu-item>
+          <span title>
+            <i class="anticon anticon-mail"></i>
+            <span>Navigation One</span>
+          </span>
+        </li>
+        <li nz-submenu>
+          <span title>
+            <i class="anticon anticon-appstore"></i>
+            <span>Navigation Two</span>
+          </span>
+          <ul>
+            <li nz-menu-item>Option 5</li>
+            <li nz-menu-item>Option 6</li>
+            <li nz-submenu>
+              <span title>Submenu</span>
+              <ul>
+                <li nz-menu-item>Option 7</li>
+                <li nz-menu-item>Option 8</li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li nz-submenu>
+          <span title>
+            <i class="anticon anticon-setting"></i>
+            <span>Navigation Three</span>
+          </span>
+          <ul>
+            <li nz-menu-item>Option 9</li>
+            <li nz-menu-item>Option 10</li>
+            <li nz-menu-item>Option 11</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  `,
+  styles  : []
+})
+export class NzDemoMenuCollapsedComponent implements OnInit {
+  isCollapsed = false;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  toggleCollapsed() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+}
diff --git a/src/showcase/nz-demo-menu/nz-demo-menu.component.ts b/src/showcase/nz-demo-menu/nz-demo-menu.component.ts
@@ -11,6 +11,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 export class NzDemoMenuComponent implements OnInit {
   NzDemoMenuBasicCode = require('!!raw-loader!./nz-demo-menu-basic.component');
   NzDemoMenuInlineCode = require('!!raw-loader!./nz-demo-menu-inline.component');
+  NzDemoMenuCollapsedCode = require('!!raw-loader!./nz-demo-menu-collapsed.component');
   NzDemoMenuExpandCode = require('!!raw-loader!./nz-demo-menu-expand.component');
   NzDemoMenuThemeCode = require('!!raw-loader!./nz-demo-menu-theme.component');
   NzDemoMenuVerticalCode = require('!!raw-loader!./nz-demo-menu-vertical.component');

diff --git a/src/showcase/nz-demo-menu/nz-demo-menu.html b/src/showcase/nz-demo-menu/nz-demo-menu.html
@@ -23,6 +23,12 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
           <p>垂直菜单，子菜单内嵌在菜单区域。</p>
         </div>
       </nz-code-box>
+      <nz-code-box [nzTitle]="'缩起内嵌菜单'" id="components-menu-demo-collapsed" [nzCode]="NzDemoMenuCollapsedCode">
+        <nz-demo-menu-collapsed demo></nz-demo-menu-collapsed>
+        <div intro>
+          <p>内嵌菜单可以被缩起/展开。</p>
+        </div>
+      </nz-code-box>
       <nz-code-box [nzTitle]="'只展开当前父级菜单'" id="components-menu-demo-expand" [nzCode]="NzDemoMenuExpandCode">
         <nz-demo-menu-expand demo></nz-demo-menu-expand>
         <div intro>
@@ -81,6 +87,13 @@ <h3><span>nz-menu</span>
           <td></td>
           <td><code>vertical</code></td>
         </tr>
+        <tr>
+          <td>nzInlineCollapsed</td>
+          <td>控制内嵌菜单的缩起/展开。</td>
+          <td>Boolean</td>
+          <td></td>
+          <td><code>false</code></td>
+        </tr>
         <tr>
           <td>nzClickActive</td>
           <td>点击后是否选中子菜单</td>

diff --git a/src/showcase/nz-demo-menu/nz-demo-menu.module.ts b/src/showcase/nz-demo-menu/nz-demo-menu.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NzDemoMenuBasicComponent } from './nz-demo-menu-basic.component';
 import { NzDemoMenuInlineComponent } from './nz-demo-menu-inline.component';
+import { NzDemoMenuCollapsedComponent } from './nz-demo-menu-collapsed.component';
 import { NzDemoMenuExpandComponent } from './nz-demo-menu-expand.component';
 import { NzDemoMenuVerticalComponent } from './nz-demo-menu-vertical.component';
 import { NzDemoMenuThemeComponent } from './nz-demo-menu-theme.component';
@@ -25,6 +26,7 @@ import { NzDemoMenuRoutingModule } from './nz-demo-menu.routing.module';
     NzDemoMenuComponent,
     NzDemoMenuBasicComponent,
     NzDemoMenuInlineComponent,
+    NzDemoMenuCollapsedComponent,
     NzDemoMenuExpandComponent,
     NzDemoMenuVerticalComponent,
     NzDemoMenuThemeComponent,