如何使用角度材料2制作响应式导航栏？

Question

我正在尝试使用角度材料2创建一个导航栏,它在移动设备和平板电脑等小屏幕中折叠.我只能找到md-button而不是md-menu-bar,就像在角度材料中一样

Answer 1

以下是我nav-bar在angular-cliapp中使用Angular2 + Material 2和flex-layout 构建响应的过程.

(请访问安装Angular Material和Angular CDK)

1)安装flex-layout

npm install @angular/flex-layout -save

2)在你的中包含flex-layoutapp.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";

3)进口

imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RoutingModule,
 FlexLayoutModule,
MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules).
],

app.component.html

<mat-toolbar color="primary">

    <button mat-button routerLink="/">
    <mat-icon>home</mat-icon> 
        {{title}}</button>

    <!-- This fills the remaining space of the current row -->
    <span class="fill-remaining-space"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
        <button mat-button routerLink="/products">Products</button>
        <button mat-button routerLink="/dashboard">Dashboard</button>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
     <mat-icon>menu</mat-icon>
    </button>

</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item routerLink="/products">Products</button>
    <button mat-menu-item routerLink="/dashboard">Dashboard</button>
    <!--<button mat-menu-item>Help</button>-->
</mat-menu>

app.component.css

.fill-remaining-space {
   /*This fills the remaining space, by using flexbox.  
  Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

注意:要测试,请调整页面大小.

看看flex-layout文档

Answer 2

使用Material创建响应式导航栏的最简单方法是使用Angular 6 CLI 原理图.

• 将Angular项目升级到6或创建新项目
• ng add @ angular/material
• ng generate @ angular/material:material-nav --name = my-nav

(如果你在运行ng add @ angular/material时得到'Collection'@ angular/material"无法解析",请看这个)

然后使用生成的组件<app-my-nav></app-my-nav> 将上述标记添加到主组件

桌面PC的响应视图:

低分辨率的响应式折叠菜单:

这最初是在Angular的博客上看到的.

Answer 3

这是我在Angular中创建响应式导航栏的最佳方式.如果您使用Angular 6,请确保
在Stackblitz上使用版本6.1+ 工作示例: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';

请记住将这些模块添加到下面的imports数组中.

3)添加材料图标链接到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 style="height: 100vh;"> 
<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%;
}
div {
    overflow: inherit;
}
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;
  }