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

(请访问Install Angular Material and Angular CDK)

1)安装flex-layout

npm install @angular/flex-layout -save

2)在app.module.ts中包含flex-layout

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