4

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

大屏幕

在左侧显示“主要”-徽标/链接，在右侧显示其他顶部导航链接。

小屏幕

显示居中的“Main”-Logo Link 和左侧的菜单按钮，用于显示 sidenav（如果屏幕很大，则包含在右侧可见的链接）。

笔记：

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

笔记2：

“主”-Logo/Link 的居中应以整个屏幕宽度为中心。它不应该被菜单按钮推到右边。

是）我有的

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

我挣扎的地方

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

任何帮助将不胜感激，所以已经谢谢你了！

4

1 回答 1

4

回答您的第一个问题：

创建一个 CSS 类fill-space并使用它来使徽标居中：

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

回答你的第二个问题：

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

在您的打字稿中，进行以下更改：

// 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();
    } 
}

链接到工作演示。

于 2017-09-19T07:30:08.390 回答