相关疑难解决方法(0)

角度2材质2 Sidenav工具栏像导航抽屉一样折叠

我有一个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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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

我想关闭sidenav到导航抽屉之类的主页图标

关闭sidenav sidenav关闭

打开sidenav sidenav open

transition navigation-drawer angular-material2 angular

7
推荐指数
2
解决办法
1万
查看次数