如何使用角材料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>