Angular Material 2 - 响应式工具栏

Question

使用 Angular 4 我试图在页面顶部有一个具有以下行为的工具栏:

大屏幕

在左侧显示“Main”-Logo/Link，其他顶部导航链接在右边。

小屏幕

居中显示“主”-Logo 链接，并在左侧显示一个菜单按钮，用于显示侧导航(包含在屏幕较大时右侧可见的链接)。

备注:

如果可见，sidenav 不应越过工具栏。

注2:

“主”-Logo/链接的居中应根据整个屏幕宽度居中。它不应该被菜单按钮推到右边。

我有什么

<div fxLayout="column" fxFlex>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sidenav.toggle()" fxHide="false" fxHide.gt-sm>
      <md-icon>menu</md-icon>
    </button>
    <button md-button routerLink="/">
      <md-icon>code</md-icon>
      <span>{{title}}</span>
    </button>
    <div fxFlex fxShow="false" fxShow.gt-sm></div>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <button md-button routerLink="/about">About</button>
      <button md-button routerLink="/legal">Legal Notice</button>
    </div>
  </md-toolbar>
  <md-sidenav-container fxFlex>
    <md-sidenav #sidenav fxHide="false" fxHide.gt-sm>
      <md-nav-list>
        <a md-list-item href="">Main</a>
        <a md-list-item href="/about">About</a>
        <a md-list-item href="/legal">Legal Notice</a>
      </md-nav-list>
    </md-sidenav>
  </md-sidenav-container>
</div>

我挣扎的地方

• 我不知道如何将“主”-Logo/链接正确居中
• 如果我在小屏幕上显示菜单并将布局切换回大屏幕，则菜单不会隐藏

---

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

Answer to your First Question:

创建一个 css 类 fill-space 并使用它来使 Logo 居中:

.fill-space {
    flex: 1 1 auto;
}

...并在您的模板中:

<span fxFlex fxHide="false" fxHide.gt-sm class="fill-space"></span>
<button md-button routerLink="/">
  <md-icon>code</md-icon>
  <span>{{title}}</span>
</button>
<span class="fill-space"></span>  

Answer to your Second Question:

您必须在屏幕调整大小时手动close() sidenav。您可以使用 @HostListener('window:resize', ['$event']) 检测:

在您的 typescript 中，进行以下更改:

// Import the following in your ts file
import { ViewChild, HostListener } from '@angular/core';
import { MdSidenav } from '@angular/material';

// Add the following in your component class to get sidenav
@ViewChild('sidenav') sidenav: MdSidenav;

// Add the method to detect screen-resize
@HostListener('window:resize', ['$event'])
onResize(event) {
    if(this.sidenav !== undefined){
        this.sidenav.close();
    } 
}

链接到 working demo .