Angular 2 Material 2 Sidenav 工具栏像导航抽屉一样折叠 [英] Angular 2 Material 2 Sidenav Toolbar collapse like Navigation Drawer

问题描述

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

<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">首页<button md-button class="sidenav-link" (click)="sidenav.close()"><md-icon>home</md-icon><span class="title">首页</md-sidenav><app-toolbar [sidenav]="sidenav"></app-toolbar></md-sidenav-container>

sidenav.html

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

打开sidenav

解决方案

这个问题并不罕见.由于工具栏中的按钮控制打开和关闭状态，因此每当单击按钮时，我必须添加一个 EventListener 以传递 sidenav 的状态.

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

另外，由于 sidenav 总是打开的，我添加了自定义 css 来动画宽度的变化.

Plunker 演示

toolbar.component.ts:

导出类 ToolbarComponent 实现 OnInit {短导航 = 真；@Input() sidenav;@输出()更改:EventEmitter= new EventEmitter();构造函数(){控制台日志(this.sidenav)；}ngOnInit() {}切换(){this.shortnav = !this.shortnav;console.log("shortnav:" + this.shortnav)this.change.emit(this.shortnav);}}

toolbar.component.html:

sidenav.component.ts:

导出类 SidenavOverviewExample {showSidenavTitle = false;sidenavWidth = 2.75;changeWidth(showShortNav){如果(showShortNav){this.sidenavWidth = 2.5;this.showSidenavTitle = false;}别的{this.sidenavWidth = 13;this.showSidenavTitle = true;}}}

sidenav.component.html:

<md-sidenav #sidenav mode="side"颜色=主要"打开=真"[ngStyle]="{'width.em': sidenavWidth }"class="animate-sidenav"><md-toolbar color="primary"><span *ngIf="showSidenavTitle">Sidenav</span></md-工具栏><button md-button class="sidenav-link" (click)="sidenav.close()"><md-icon>home</md-icon><span class="title">首页<button md-button class="sidenav-link" (click)="sidenav.close()"><md-icon>home</md-icon><span class="title">首页</md-sidenav><app-toolbar [sidenav]="sidenav" (change)="changeWidth($event)"></app-toolbar></md-sidenav-container>

sidenav.component.css:

.mat-sidenav-transition .mat-sidenav{/* 自定义动画来增加和缩小宽度 */-webkit-transition: 宽度 .3s !important;/* 对于 Safari 3.1 到 6.0 */过渡:宽度 .3s ！重要；}

希望对你有帮助:)

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

close sidenav

open 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.

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'.

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

Plunker demo

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 工具栏像导航抽屉一样折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！