Angular 2 Material 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 来实现。我们可以调用方法 increase() 和 decrease() 来根据 mouseenter 和 mouseleave 等事件更改 sidenav 的宽度，或者在您的情况下点击 "toolbar -菜单按钮”

<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

我希望这对您有所帮助:-)