使用Angular 2创建一个响应式工具栏材料
问题描述:
我已经使用Angular 2 Material创建了一个工具栏但它不是reposnsive,我们如何将响应性添加到Angular 2 Toolbar。使用Angular 2创建一个响应式工具栏材料
我的工具栏
<md-toolbar color = "primary">
<button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> 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()"> Contact Card</button>
</md-toolbar>
答
问题
您需要一种方法来让你的导航栏响应。
解决方案
您可以轻松地将它包装在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中。它会有反应。你需要花时间学习它是如何工作的。但是一旦你做到了,未来对你来说会更容易,你将永远不必再问如何让事情再次响应。
答
我的原油实现与尝试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>
我已经用引导部件柔性布局和角度,材料做呐vbar,但我想利用角度的材料组件不bootstrap,并使他们响应 – INFOSYS
但你需要CSS来使其响应。不是一个组件。 – wuno
是的,但我需要材料组件的相同感觉,材质UI的外观我希望导航栏如此,即使链接 – INFOSYS