使用 Angular 材质创建响应式工具栏答案

【问题标题】：Create a Responsive Toolbar using Angular Material使用 Angular 材质创建响应式工具栏
【发布时间】：2017-04-04 07:09:10
【问题描述】：

我使用 Angular Material 创建了一个工具栏。但是，它没有响应。如何使工具栏具有响应性？

工具栏代码：

<md-toolbar color = "primary">
    <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button>
    <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button>
    <md-menu #bMenu="mdMenu">
      <button md-menu-item [routerLink]="['/a4']">Angular Component</button>
      <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button>
      <button md-menu-item [routerLink]="['/inout']">Event Emitters</button>
      <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button>
      <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button>
      <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button>
      <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button>
      <button md-menu-item [routerLink]="['/viewchild']">View Child</button>
      <button md-menu-item [routerLink]="['/view']">View Encapsulation</button>
    </md-menu>

    <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button>
    <md-menu #aMenu="mdMenu">
      <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button>
      <button md-menu-item [routerLink]="['/guard']">Angular Guards</button>
      <button md-menu-item [routerLink]="['/host']">Host & Host-Context</button>
    </md-menu>

    <button md-button (click)="openDialog()">&nbsp;Contact Card</button>
  </md-toolbar>

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

这是我最喜欢在 Angular 中创建响应式导航栏的方式。如果您使用 Angular 6，请确保您使用的是 6.1+
Stackblitz 上的工作示例：https://stackblitz.com/edit/angular-v6xwte

小屏幕上的示例：

大屏幕上的示例：

以下是具体的操作步骤：

1) 安装必要的软件包。输入你的终端：

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2) 在你的 app.module.ts 中导入必要的模块

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';

记得将这些模块添加到下面的导入数组中。

3) 将 Material Icons 链接添加到您的 index.html
该链接必须位于任何 Angular 内容之前。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4) 在你的 styles.css 中添加一个 Angular 主题并将边距设置为 0%

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body{
    margin: 0%;
}

5) 在你的 app.component.html 中添加工具栏 HTML 代码

<div> 
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about-us">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>

  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about-us">About us</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

6) 在 app.component.css 中设置工具栏样式

.companyName{
    font-size: 150%;
}

.mat-toolbar{
  height: 7vh;
}

div {
    overflow: inherit;
}

.mat-sidenav-container{
  background-color: lightskyblue;
  min-height: 93vh !important;
}

a{
    text-decoration: none;
    font-size: 110%;
    white-space: normal;
}

button{
    font-size: 110%;
    min-width: min-content;
}

.example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }

  .mat-sidenav-content{
      font-size: 200%;
      text-align: center;
  }

【讨论】：

伟大的。我只是想让你知道，在小屏幕打开菜单后，随着屏幕大小的增加自动关闭它怎么样。
感谢您的建议。将 fxHide.gt-sm="true" 添加到 mat-sidenav 就足够了。侧导航消失。剩下的只是变暗的主要内容，但在任何地方单击后它都会消失。
这太棒了。谢谢@TomaszChudzik。对于未来的读者，如果您在编译 flexbox 时遇到错误（在我的情况下是 MediaQueryList），请记住移动到较低版本。只需运行npm install @angular/flex-layout@6.0.0-beta.18
我正在使用这个很好的示例，但在大屏幕上我得到一个垂直滚动条，因为设置了 height: 100%; min-height: 100%; for mat-sidenav-container。这使得容器比页面大，具有顶部菜单的高度。我一直在尝试解决这个问题，但无法让它发挥作用。
我找到了一个不同但类似的解决方案。将第一个<div> 更改为<div style="height: calc(100vh - 65px);">，其中65px 是工具栏的大小。

【解决方案2】：

问题

您需要一种方法来使您的导航栏具有响应性。

解决方案

您可以将Material Angular 与ToolBar 和Flex-Layout 一起使用。

示例

npm install @angular/flex-layout --save

带有 Flex 布局的示例 Angular 材质工具栏。

<div style="height: 100vh;">

  <mat-toolbar color="primary">

    <span>Responsive Navigation</span>

    <span class="example-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <a href="#" mat-button>Menu Item 1</a>

      <a href="#" mat-button>Menu Item 2</a>

      <a href="#" mat-button>Menu Item 3</a>

      <a href="#" mat-button>Menu Item 4</a>

      <a href="#" mat-button>Menu Item 5</a>

      <a href="#" mat-button>Menu Item 6</a>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>

    </div>

  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav #sidenav fxLayout="column">

      <div fxLayout="column">

        <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>

        <a href="#" mat-button>Menu Item 1</a>

        <a href="#" mat-button>Menu Item 2</a>

        <a href="#" mat-button>Menu Item 3</a>

        <a href="#" mat-button>Menu Item 4</a>

        <a href="#" mat-button>Menu Item 5</a>

        <a href="#" mat-button>Menu Item 6</a>

      </div>

    </mat-sidenav>

    <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>

  </mat-sidenav-container>

</div>

【讨论】：

我已经使用引导组件来制作导航栏，但我想使用角材质组件而不是引导并使其具有响应性
是的，但我需要相同的材质组件感觉，材质 ui 的外观我希望导航栏像链接一样
这适用于 Angular js，也不适用于 Angular 2。由于新材料是倒置的
@wuno - 我认为需要做出一些改变。将主要内容放在哪里（我的意思是每个菜单/链接的正文）。现在它位于内。我不认为这是正确的方法。
感谢您告诉我。我更新了答案以删除指向过时教程的链接。

【解决方案3】：

使用angular/flex-layout 进行响应。

【讨论】：

【解决方案4】：

我对 flex-layout 和 angular-material 5.0.2 的粗略实现尝试

.mat-sidenav-container {
  background: rgba(0, 0, 0, 0.08);
}

.blank-grow {
  flex: 1 1 auto;
}

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a mat-list-item>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span> Big Header</span>
    <span class="blank-grow"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <a>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </div>
  </mat-toolbar>
</mat-sidenav-container>

【讨论】：