From 23b73bb5314b5954b5a23c335400cf61e7e10b50 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 9 Sep 2017 01:55:39 -0500 Subject: [PATCH] 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 --- src/components/menu/nz-menu.component.ts | 47 +++++++++++++ .../nz-demo-menu-collapsed.component.ts | 67 +++++++++++++++++++ .../nz-demo-menu/nz-demo-menu.component.ts | 1 + src/showcase/nz-demo-menu/nz-demo-menu.html | 13 ++++ .../nz-demo-menu/nz-demo-menu.module.ts | 2 + 5 files changed, 130 insertions(+) create mode 100644 src/showcase/nz-demo-menu/nz-demo-menu-collapsed.component.ts diff --git a/src/components/menu/nz-menu.component.ts b/src/components/menu/nz-menu.component.ts index dc2dae740af..915798e49b0 100644 --- 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,6 +124,7 @@ export class NzMenuComponent implements OnChanges, AfterViewInit { ngAfterViewInit() { this.isInit = true; + this._tempMode = this.nzMode; } /** trigger when menu item clicked */ @@ -100,6 +132,21 @@ export class NzMenuComponent implements OnChanges, AfterViewInit { 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 new file mode 100644 index 00000000000..5b23afd9820 --- /dev/null +++ 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: ` +
+ + +
+ `, + 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 index aca85f8358f..9983f7299e4 100644 --- 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 index 70c407e99c5..76c066f2681 100644 --- a/src/showcase/nz-demo-menu/nz-demo-menu.html +++ b/src/showcase/nz-demo-menu/nz-demo-menu.html @@ -23,6 +23,12 @@

代码演示垂直菜单，子菜单内嵌在菜单区域。

+ + +
+

内嵌菜单可以被缩起/展开。

+
+
@@ -81,6 +87,13 @@

nz-menu vertical + + nzInlineCollapsed + 控制内嵌菜单的缩起/展开。 + Boolean + + false + nzClickActive 点击后是否选中子菜单 diff --git a/src/showcase/nz-demo-menu/nz-demo-menu.module.ts b/src/showcase/nz-demo-menu/nz-demo-menu.module.ts index efb4bea8943..2fbe470786a 100644 --- 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,