使用Angular 2創建一個響應式工具欄材料

Question

我已經使用Angular 2 Material創建了一個工具欄但它不是reposnsive，我們如何將響應性添加到Angular 2 Toolbar。

我的工具欄

<md-toolbar color = "primary"> 
    <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button> 
    <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button> 
    <md-menu #bMenu="mdMenu"> 
     <button md-menu-item [routerLink]="['/a4']">Angular Component</button> 
     <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button> 
     <button md-menu-item [routerLink]="['/inout']">Event Emitters</button> 
     <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button> 
     <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button> 
     <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button> 
     <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button> 
     <button md-menu-item [routerLink]="['/viewchild']">View Child</button> 
     <button md-menu-item [routerLink]="['/view']">View Encapsulation</button> 
    </md-menu> 

    <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button> 
    <md-menu #aMenu="mdMenu"> 
     <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button> 
     <button md-menu-item [routerLink]="['/guard']">Angular Guards</button> 
     <button md-menu-item [routerLink]="['/host']">Host & Host-Context</button> 
    </md-menu> 

    <button md-button (click)="openDialog()">&nbsp;Contact Card</button> 
    </md-toolbar> 

Answer 1

問題

您需要一種方法來讓你的導航欄響應。

解決方案

您可以輕鬆地將它包裝在bootstrap from twitter

例

引導出來響應的開箱。這很容易使用一個簡單的學習。以下是使用網格在網頁中製作響應行的示例。

<div class="row"> 
    <div class="col-sm-4>.col-sm-4</div> 
    <div class="col-sm-4>.col-sm-4</div> 
    <div class="col-sm-4">.col-sm-4</div> 
</div> 

基本上每一行廣告多達12所以，你可以讓SM MD和LG盒將其相加12.所以，如果你想2盒，你會做number 6

<div class="row"> 
     <div class="col-lg-6>.col-lg-6</div> 
     <div class="col-lg-6>.col-lg-6</div> 
    </div> 

這裏是來自文檔的導航示例。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
    <a class="navbar-brand" href="#">Hidden brand</a> 
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 

你可以使用這個和bootstrap然後添加你的鏈接到html中。它會有反應。你需要花時間學習它是如何工作的。但是一旦你做到了，未來對你來說會更容易，你將永遠不必再問如何讓事情再次響應。

Answer 2

使用angular/flex-layout作爲響應。

• flex-layout wiki
• flex-layout Demo

Answer 3

我的原油實現與嘗試5.0.2

.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>