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

Question

Refer this example

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

全屏

缩小宽度

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

Answer 1

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

以下是屏幕尺寸＆lt;侧屏幕的示例。 720px，以及＆gt; = 720px的其他方式。

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