角度2材質2 Sidenav工具欄像導航抽屜一樣折疊

Question

我有一個sidenav和一個嵌套的工具欄
toolbar.html

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" color="primary">
     <md-toolbar color="primary"><span>Sidenav</span></md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>
      <app-toolbar [sidenav]="sidenav"></app-toolbar>
</md-sidenav-container>

sidenav.html

<md-toolbar color="primary">
  <button md-button class="toolbar-menu-button"
          (click)="sidenav.toggle(); isCollapsed = !isCollapsed">
    <md-icon [@iconChange]="isCollapsed">menu</md-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <button md-button class="toolbar-link" >DASHBOARD</button>
  <span class="toolbar-spacer"></span>
</md-toolbar>

https://plnkr.co/edit/up19ZNJyMt6uatqdI9uv?p=preview

我想關閉sidenav到導航抽屜之類的主頁圖標

關閉sidenav

打開sidenav

Answer 1

這可以使用簡單的css hack來實現。 我們可以調用方法增加（）和減少（）基於類似的mouseenter和鼠標離開或你的情況的“工具欄菜單按鈕”的onClick一些事件改變sidenav的寬度

<md-sidenav #sidenav mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseover)="increase()"   (mouseleave)="decrease()">

當我們指向sidenav並且當我們將鼠標指針指向某個其他位置時減小寬度時，這將會影響sidenav的寬度。

  increase(){
    this.sidenavWidth = 15;
  }
  decrease(){
    this.sidenavWidth = 4;
  }

看看這個演示： - https://mini-sidenav.firebaseapp.com/

和github回購： - https://github.com/Ravi-Rajpurohit/mini-md-sidenav

我希望這有幫助 ：-）

Answer 2

這個問題有點不尋常。 由於工具欄中的按鈕控制着打開和關閉狀態， sidenav每當單擊按鈕時，我都必須添加一個EventListener以傳遞sidenav的狀態。

基於該event標志，我添加了一些ngStyle將保持寬度sidenav 。 請注意， sidenav現在總是打開[add property opened="true" ]，因為它始終可見。 我最后還使用工具欄中的發射標志來用於'Sidenav'標題。 如果需要顯示部分“Sid”，可以將其刪除。

此外，由於sidenav始終打開，我添加了自定義css來設置寬度變化的動畫。

Plunker演示

toolbar.component.ts：

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @Input() sidenav;

  @Output()
  change: EventEmitter<booelan> = new EventEmitter<boolean>();

  constructor() { 
    console.log(this.sidenav);
  }

  ngOnInit() {
  }

  toggle(){
    this.shortnav = !this.shortnav;
    console.log("shortnav: " + this.shortnav)
    this.change.emit(this.shortnav);
  }

}

toolbar.component.html：

<button md-button class="toolbar-menu-button"
          (click)="toggle(); isCollapsed = !isCollapsed">

sidenav.component.ts：

export class SidenavOverviewExample {

  showSidenavTitle = false;
  sidenavWidth = 2.75;

  changeWidth(showShortNav){
    if(showShortNav){
      this.sidenavWidth = 2.5;
      this.showSidenavTitle = false;
    }
    else{
      this.sidenavWidth = 13;
      this.showSidenavTitle = true;
    }
  }
}

sidenav.component.html：

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side"   
                color="primary" 
                opened="true"
                [ngStyle]="{ 'width.em': sidenavWidth }"
                class="animate-sidenav">
     <md-toolbar color="primary">
       <span *ngIf="showSidenavTitle">Sidenav</span>
     </md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>

      <app-toolbar [sidenav]="sidenav" (change)="changeWidth($event)"></app-toolbar>

 </md-sidenav-container>

sidenav.component.css：

.mat-sidenav-transition .mat-sidenav{
  /* custom animation to grow and shrink width */
  -webkit-transition: width .3s !important; /* For Safari 3.1 to 6.0 */
  transition: width .3s !important;
}

希望這可以幫助你:)