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

Question

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

Answer 1

下面是我用来构建自己的响应式nav-bar的应用程序，该应用程序在angular-cli应用程序中使用Angular2 + Material 2和flex-layout。

（请访问Install Angular Material and 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

.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

看看github上的angular2-material项目。这是到目前为止，他们已经公布的材料设计的组件列表：

https://www.npmjs.com/~angular2-material

另外，我觉得无论是md-sidenav或md-toolbar是你在找什么。

md-sidenav - https://www.npmjs.com/package/@angular2-material/sidenav

md-toolbar - https://www.npmjs.com/package/@angular2-material/toolbar

注：该项目仍处于alpha版本，这意味着可以有自己的API中的重大更改。不建议在生产中使用。

Answer 3

我粗试图修改以与作为角材料的新组件名称抽屉实现工具栏答案5.0.2

要做到：需要得到CSS所有标题链接的固定。菜单图标应该是透明的。

https://responsivematerial2.stackblitz.io/

.mat-sidenav-container { 
 
    background: rgba(0, 0, 0, 0.08); 
 
} 
 

 
.blank-grow { 
 
    flex: 1 1 auto; 
 
}

<mat-sidenav-container fullscreen> 
 
    <mat-sidenav #sidenav> 
 
    <mat-nav-list> 
 
     <a mat-list-item> 
 
     <mat-icon mat-list-icon>home</mat-icon> 
 
     <span mat-line>home</span> 
 
     </a> 
 

 
     <a mat-list-item> 
 
     <mat-icon mat-list-icon>backup</mat-icon> 
 
     <span mat-line>Backup</span> 
 
     </a> 
 
    </mat-nav-list> 
 
    </mat-sidenav> 
 
    <mat-toolbar color="primary"> 
 
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-sm> 
 
     <mat-icon>menu</mat-icon> 
 
    </button> 
 
    <span> Big Header</span> 
 
    <span class="blank-grow"></span> 
 
    <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
 
     <a> 
 
     <mat-icon mat-list-icon>home</mat-icon> 
 
     <span mat-line>home</span> 
 
     </a> 
 

 
     <a> 
 
     <mat-icon mat-list-icon>backup</mat-icon> 
 
     <span mat-line>Backup</span> 
 
     </a> 
 
    </div> 
 
    </mat-toolbar> 
 
</mat-sidenav-container>