< mat-sidenav> ,Angular Directive,用于创建侧面导航栏和主要内容面板,其中包含材质设计样式和动画功能.
< mat-sidenav-container> - 代表主要容器.
< mat-sidenav-content> - 代表内容面板.
< mat-sidenav> - 代表侧面板.
在本章中,我们将展示绘制所需的配置使用Angular Material的sidenav控件.
按照以下步骤更新我们在 Angular 6中创建的Angular应用程序 - 项目设置章节&减号;
Step | 描述 |
---|---|
1 | 使用创建项目名称 materialApp ,如 Angular 6 - Project Setup 章节中所述. |
2 | 修改 app.module.ts , app.component.ts , app.component.css 和 app.component.html ,如下所述.保持其余文件不变. |
3 | 编译并运行应用程序以验证实现的逻辑的结果. |
以下是修改后的模块描述符的内容 app.module.ts .
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatSidenavModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatSidenavModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
以下是修改过的CSS文件的内容 app.component.css .
.tp-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #eee; } .tp-section { display: flex; align-content: center; align-items: center; height: 60px; width:100px; }
以下是修改过的HTML主机文件的内容 app.component.html .
<mat-sidenav-container class = "tp-container"> <mat-sidenav mode = "side" opened> <section class = "tp-section"> <span>File</span> </section> <section class = "tp-section"> <span>Edit</span> </section> </mat-sidenav> <mat-sidenav-content>Main content</mat-sidenav-content> </mat-sidenav-container>
验证结果.
首先,我们创建了一个跨越整个页面的主容器.
然后使用mat-sidenav创建侧面导航,使用mat-sidenav-创建内容面板内容.