如何使用Angular材质2制作响应式导航栏? [英] How to make a responsive nav-bar using Angular material 2?

问题描述

我正在尝试使用折叠的角度材料2 创建导航栏在移动设备和平板电脑等小屏幕上显示.

I'm trying to create a navigation bar using Angular material 2 that collapses in small screens like mobile devices and tablets.

我只能找到md-button，但不能找到md-menu-bar，就像在Angular材质中一样.

I was only able to find md-button but not md-menu-bar as was in Angular material.

推荐答案

这是我用来在Angular2 + Material 2和angular-cli应用程序中的flex-layout构建响应式nav-bar的内容.

Here is what I used to build my responsive nav-bar using Angular2+ Material 2 and flex-layout in angular-cli app.

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

1)安装弹性布局

npm install @angular/flex-layout -save

2)在您的app.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

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

注意:要进行测试，请调整页面大小.

Note: to test, resize your page.

看看弹性布局文档

这篇关于如何使用Angular材质2制作响应式导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！