使用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>