Angular 2 Material 2 Sidenav工具栏像导航抽屉一样折叠

本文介绍了Angular 2 Material 2 Sidenav工具栏像导航抽屉一样折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个sidenav和一个嵌套的工具栏
toolbar.html

I have a sidenav and a nested toolbar
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

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

I would like to close the sidenav up to the home icon like Navigation Drawer

关闭边导航

打开Sidenav

推荐答案

此问题很少出现.由于工具栏中的按钮控制着打开和关闭状态，因此每当单击按钮时，我都必须添加一个EventListener以传递sidenav的状态.

This problem is little unusual. Since the button from toolbar is controlling the open and close state, I had to add an EventListener to pass the state of sidenav whenever the button is clicked.

基于event标志，我添加了一些ngStyle来保持sidenav的宽度.请注意，由于sidenav始终可见，因此它现在始终处于打开状态[添加属性opened="true"].我还最终使用了工具栏上的发出标志来使用"Sidenav"标题.如果需要显示部分"Sid"，可以将其删除.

Based on the event flag, I added some ngStyle that will maintain the width of sidenav. Note that, the sidenav is always open now [add property opened="true"], since it's always visible. I also ended up using the emitted flag from toolbar to use for 'Sidenav' title. You can remove it if you need to show the partial 'Sid'.

此外，由于sidenav始终处于打开状态，因此我添加了自定义css来设置宽度变化的动画.

Also, since the sidenav is always open, I added custom css to animate the change of width.

柱塞演示

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;
}

希望这对您有所帮助:)

Hope this helps you :)

这篇关于Angular 2 Material 2 Sidenav工具栏像导航抽屉一样折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！