如何在窗口调整大小（缩小）时将工具栏转换为侧导航栏？答案

【问题标题】：How to convert toolbar to side nav bar on window resize (reduce)?如何在窗口调整大小（缩小）时将工具栏转换为侧导航栏？
【发布时间】：2017-09-05 23:28:00
【问题描述】：

Refer this example

当浏览器全屏时，它应该显示工具栏及其内容。但是如果浏览器的宽度减小了，那么应该显示新的侧导航栏。如何实现这个功能？如何为此使用媒体查询？

全屏

缩小宽度

我想使用 Angular 材质设计来显示工具栏和侧导航栏。

【问题讨论】：

标签： html css angular angular-material2

【解决方案1】：

您可以使用带有ngIf 的布尔标志来显示和隐藏侧导航按钮和工具栏内容。然后使用window:resize 事件来切换标志。

这是一个屏幕尺寸 = 720 像素。

HTML：

<md-toolbar [color]="toolbarColor">
    <button *ngIf="openSidenavFlag" md-button color="primary" (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <h1>Angular</h1>
    <div *ngIf="!openSidenavFlag" style="margin: 0 auto">
      <button md-button>Blog</button>
      <button md-button>About</button>
      <button md-button>Contact</button>
    </div>
</md-toolbar>

<div fxFlex class="app-content">
  This is the content
</div>

<md-sidenav-container (window:resize)="onResize($event)" style="height: 91vh;background: #FFFFFF">

  <md-sidenav #sidenav mode="side" style="background: orange">
    Sidenav!
  </md-sidenav>

</md-sidenav-container>

<footer style="background: skyblue">This is footer</footer>

ts：

  openSidenavFlag = false;

  constructor() {
  }

  ngOnInit(){
    this.onResize();
  }

  onResize(event) {
    let width;

    if(event != undefined){
      width = event.target.innerWidth;
      // console.log(event.target.innerWidth);
    }
    else{
      // console.log(document.body.clientWidth);
      width = document.body.clientWidth;
    }

    if (width >= 720) {
      this.openSidenavFlag = false;
    } 
    else {
      this.openSidenavFlag = true;
    }

  }

Plunker demo

【讨论】：