我正在尝试使用角度材料2创建一个导航栏,该材料在移动设备和平板电脑等小屏幕中折叠。我只能找到md-button而不是md-menu-bar,就像角度材料一样
以下是我在angular-cli应用程序中使用Angular2 Material 2和flex-layout构建响应式导航栏的方法。
(请访问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
注意:要测试,请调整页面大小。
看看flex-layout文档