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

前端之家收集整理的这篇文章主要介绍了angular-material2 – 如何使用角度材料2制作响应式导航栏?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用角度材料2创建一个导航栏,该材料在移动设备和平板电脑等小屏幕中折叠。我只能找到md-button而不是md-menu-bar,就像角度材料一样
以下是我在angular-cli应用程序中使用Angular2 Material 2和flex-layout构建响应式导航栏的方法

(请访问Install Angular Material and Angular CDK)

1)安装flex-layout

  1. npm install @angular/flex-layout -save

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

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

3)进口

  1. imports: [
  2. 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).
  3. ],

app.component.html

  1. <mat-toolbar color="primary">
  2.  
  3. <button mat-button routerLink="/">
  4. <mat-icon>home</mat-icon>
  5. {{title}}</button>
  6.  
  7. <!-- This fills the remaining space of the current row -->
  8. <span class="fill-remaining-space"></span>
  9. <div fxLayout="row" fxShow="false" fxShow.gt-sm>
  10. <button mat-button routerLink="/products">Products</button>
  11. <button mat-button routerLink="/dashboard">Dashboard</button>
  12. </div>
  13. <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
  14. <mat-icon>menu</mat-icon>
  15. </button>
  16.  
  17. </mat-toolbar>
  18. <mat-menu x-position="before" #menu="matMenu">
  19. <button mat-menu-item routerLink="/products">Products</button>
  20. <button mat-menu-item routerLink="/dashboard">Dashboard</button>
  21. <!--<button mat-menu-item>Help</button>-->
  22. </mat-menu>

app.component.css

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

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

看看flex-layout文档

猜你在找的Angularjs相关文章