如何在 window 调整大小（缩小）时将工具栏转换为侧边导航栏？

Question

Refer this example

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

全屏

缩小宽度

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

Answer 1

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

这是屏幕尺寸 < 720 像素的 sidenav 示例，以及 >= 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

如何在 window 调整大小（缩小）时将工具栏转换为侧边导航栏？

How to convert toolbar to side nav bar on window resize (reduce)?

html

css

angular-material2

angular