使用 Angular Material 创建响应式工具栏
Create a Responsive Toolbar using Angular Material
我使用 Angular Material 创建了一个工具栏。但是,它没有响应。如何使工具栏响应?
工具栏代码:
<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>
问题
您需要一种使导航栏响应的方法。
解决方案
您可以使用 Material Angular with ToolBar and Flex-Layout.
例子
npm install @angular/flex-layout --save
示例 Angular Material 带有 Flex 布局的工具栏。
<div style="height: 100vh;">
<mat-toolbar color="primary">
<span>Responsive Navigation</span>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
</mat-sidenav-container>
</div>
使用 angular/flex-layout
进行响应。
我对 flex-layout 和 angular-material 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>
这是我最喜欢的在 Angular 中创建响应式导航栏的方法。如果您使用 Angular 6,请确保您使用的是 6.1+
版本
Stackblitz 上的工作示例:https://stackblitz.com/edit/angular-v6xwte
较小屏幕上的示例:
大屏幕上的示例:
以下是具体的操作步骤:
1) 安装必要的包。输入您的终端:
npm install --save @angular/material @angular/cdk @angular/animations
npm install @angular/flex-layout --save
2) 在 app.module.ts
中导入必要的模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';
记得将这些模块添加到下面的导入数组中。
3) 添加 Material 图标 link 到您的 index.html
link 必须位于任何 Angular 内容之前。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4) 在您的 styles.css 中添加一个 Angular 主题并将页边距设置为 0%
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body{
margin: 0%;
}
5) 在 app.component.html
中添加工具栏 HTML 代码
<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="companyName" routerLink="/">
<span>Site name</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/about-us">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<a mat-button routerLink="/about-us">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
Awesome content
</mat-sidenav-content>
</mat-sidenav-container>
</div>
6) app.component.css
中的工具栏样式
.companyName{
font-size: 150%;
}
.mat-toolbar{
height: 7vh;
}
div {
overflow: inherit;
}
.mat-sidenav-container{
background-color: lightskyblue;
min-height: 93vh !important;
}
a{
text-decoration: none;
font-size: 110%;
white-space: normal;
}
button{
font-size: 110%;
min-width: min-content;
}
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.mat-sidenav-content{
font-size: 200%;
text-align: center;
}
我使用 Angular Material 创建了一个工具栏。但是,它没有响应。如何使工具栏响应?
工具栏代码:
<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>
问题
您需要一种使导航栏响应的方法。
解决方案
您可以使用 Material Angular with ToolBar and Flex-Layout.
例子
npm install @angular/flex-layout --save
示例 Angular Material 带有 Flex 布局的工具栏。
<div style="height: 100vh;">
<mat-toolbar color="primary">
<span>Responsive Navigation</span>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
<a href="#" mat-button>Menu Item 1</a>
<a href="#" mat-button>Menu Item 2</a>
<a href="#" mat-button>Menu Item 3</a>
<a href="#" mat-button>Menu Item 4</a>
<a href="#" mat-button>Menu Item 5</a>
<a href="#" mat-button>Menu Item 6</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
</mat-sidenav-container>
</div>
使用 angular/flex-layout
进行响应。
我对 flex-layout 和 angular-material 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>
这是我最喜欢的在 Angular 中创建响应式导航栏的方法。如果您使用 Angular 6,请确保您使用的是 6.1+
版本
Stackblitz 上的工作示例:https://stackblitz.com/edit/angular-v6xwte
较小屏幕上的示例:
大屏幕上的示例:
以下是具体的操作步骤:
1) 安装必要的包。输入您的终端:
npm install --save @angular/material @angular/cdk @angular/animations
npm install @angular/flex-layout --save
2) 在 app.module.ts
中导入必要的模块import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';
记得将这些模块添加到下面的导入数组中。
3) 添加 Material 图标 link 到您的 index.html
link 必须位于任何 Angular 内容之前。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4) 在您的 styles.css 中添加一个 Angular 主题并将页边距设置为 0%
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body{
margin: 0%;
}
5) 在 app.component.html
中添加工具栏 HTML 代码<div>
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<a mat-button class="companyName" routerLink="/">
<span>Site name</span>
</a>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<a mat-button routerLink="/about-us">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<a mat-button routerLink="/about-us">About us</a>
<a mat-button routerLink="/prices">Prices</a>
<a mat-button routerLink="/start-page">Start page</a>
<a mat-button routerLink="/offer">Offer</a>
<a mat-button routerLink="/contact">Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
Awesome content
</mat-sidenav-content>
</mat-sidenav-container>
</div>
6) app.component.css
中的工具栏样式.companyName{
font-size: 150%;
}
.mat-toolbar{
height: 7vh;
}
div {
overflow: inherit;
}
.mat-sidenav-container{
background-color: lightskyblue;
min-height: 93vh !important;
}
a{
text-decoration: none;
font-size: 110%;
white-space: normal;
}
button{
font-size: 110%;
min-width: min-content;
}
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.mat-sidenav-content{
font-size: 200%;
text-align: center;
}