前提准備：
構建好一個Angular2應用
熟悉CSS的flex布局風格
1 利用flex進行布局
1.1 創建三個組件
app-header app-main app-footer
1.2 在主組件中編寫大體結構代碼
<div class="site"> <header> <app-header></app-header> <!-- 頁眉組件 --> </header> <main> <app-main></app-main> <!-- 內容組件 --> </main> <footer> <app-footer></app-footer> <!-- 頁腳組件 --> </footer> </div>
1.3 在全局樣式中編寫代碼實現flex風格布局
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 導入material的內建主體
html, body, app-root, md-sidenav-container, .site {
width: 100%;
height: 100%;
margin: 0;
}
.site {
display: flex;
flex-direction: column;
}
header {
background-color: skyblue;
}
main {
background-color: grey;
flex: 1;
}
footer {
background-color: skyblue;
}
1.3 布局效果如下
2 利用MdSidenavModule快速構建側邊欄
2.1 下載相關的依賴包
cnpm i --save @angular/material@2.0.0-beta.7
技巧01：使用 materil 時需要將material的主題引入到全局樣式中，引入全局樣式有兩種方式
方式一：在 styles.scss 中通過 @import 引入，例如
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
方式二：在 .angular-cli.json 文件中為styles添加元素
參考博文：點擊前往
2.2 在主模塊中引入MdSidenavModule模塊
import { MdSidenavModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MdSidenavModule } from '@angular/material';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';
@NgModule({
declarations: [
AppComponent,
TestComponent,
HeaderComponent,
MainComponent,
FooterComponent,
SidebarComponent
],
imports: [
BrowserModule,
MdSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2.3 在主組件中利用MdSidenavModule提供的組件進行側邊欄的構建
<md-sidenav-container> <md-sidenav #sidenav> <app-sidebar></app-sidebar> </md-sidenav> <div class="site"> <header> <app-header></app-header> </header> <main> <button (click)="sidenav.open()">點擊划出</button> <app-main></app-main> </main> <footer> <app-footer></app-footer> </footer> </div> </md-sidenav-container>
2.4 具體效果如下
點擊按鈕后划出側邊欄的效果如下：
4 md-sidenav組件屬性詳解
4.1 mode屬性：設置側邊欄彈出的效果
over -> 覆蓋（默認）
side -> 推擠
push -> 覆蓋 + 推擠
效果如下：
4.2 align屬性：設置側邊欄的位置
start -> 左邊（默認）
end -> 右邊
效果如下：
4.3 注意：material最多只支持兩個側邊欄
<md-sidenav-container> <md-sidenav #sidenav1 mode=push align=start> <!-- 左邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <md-sidenav #sidenav2 mode=push align=end> <!-- 右邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <div class="site"> <header> <app-header></app-header> <!-- 頁眉組件 --> </header> <main> <button (click)=sidenav1.open()>點擊划出左側邊欄</button> <button (click)=sidenav2.open()>點擊划出右側邊欄</button> <app-main></app-main> <!-- 內容組件 --> </main> <footer> <app-footer></app-footer> <!-- 頁腳組件 --> </footer> </div> </md-sidenav-container>
4.4 相關方法
open -> 打開側邊欄
toggle -> 打開、關閉
<md-sidenav-container> <md-sidenav #sidenav1 mode=side align=start> <!-- 左邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <md-sidenav #sidenav2 mode=side align=end> <!-- 右邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <div class="site"> <header> <app-header></app-header> <!-- 頁眉組件 --> </header> <main> <button (click)=sidenav1.toggle()>toggle划出關閉左側邊欄</button> <button (click)=sidenav2.open()>open划出右側邊欄</button> <app-main></app-main> <!-- 內容組件 --> </main> <footer> <app-footer></app-footer> <!-- 頁腳組件 --> </footer> </div> </md-sidenav-container>
5 利用MdToolbarModule對頁眉和頁腳進行重構
5.1 清除主組件中對頁眉和頁腳的樣式
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 導入material的內建主體
html, body, app-root, md-sidenav-container, .site {
width: 100%;
height: 100%;
margin: 0;
}
.site {
display: flex;
flex-direction: column;
}
header {
// background-color: skyblue;
}
main {
background-color: grey;
flex: 1;
}
footer {
// background-color: skyblue;
}
.fill-remaining-space { // flex項目自動填充多余空間
flex: 1 1 auto;
}
5.2 在需要用到的模塊中導入MdToolbarModule模塊
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MdSidenavModule, MdToolbarModule } from '@angular/material';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';
@NgModule({
declarations: [
AppComponent,
TestComponent,
HeaderComponent,
MainComponent,
FooterComponent,
SidebarComponent
],
imports: [
BrowserModule,
MdSidenavModule,
MdToolbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5.3 利用md-toolbar組件重構頁眉和頁腳組件中的內容
md-toolbar組件是一個flex容器，可以直接使用flex容器相關的屬性
技巧01：md-toolbar會自動在其內部添加一個div元素，這個div元素才是一個flex容器，從源碼中可以看出
md-toolbar的color屬性：設置白md-toolbar的顏色
primary -> 主色
accent -> 副色
warn -> 警告色
技巧：主色和副色是在主題中設置的
material主題色顯示：點擊前往
<md-toolbar color=primary> <button (click)="openSidebar()">菜單</button> <span>企業協作平台</span> </md-toolbar>
<md-toolbar color=primary> <span class="fill-remaining-space"></span> <span>© 庠序科技</span> <span class="fill-remaining-space"></span> </md-toolbar>
效果圖如下：
5.4 代碼解釋01
<md-toolbar color=primary> <span class="fill-remaining-space"></span> <span>© 庠序科技</span> <span class="fill-remaining-space"></span> </md-toolbar>
md-toolbar中的三個span元素都是flex項目，其中第一個和第三個span元素由於使用了fill-remaining-space類，所以他們兩個元素會將剩余的空間進行平均分配
fill-remaining-space對應的代碼如下：
.fill-remaining-space { // flex項目自動填充多余空間
flex: 1 1 auto;
}
flex布局相關：點擊前往
flex布局實戰：點擊前往
5.5 代碼解釋02
<md-toolbar color=primary> <span class="fill-remaining-space"></span> <span>© 庠序科技</span> <span class="fill-remaining-space"></span> <md-toolbar-row> <span class="fill-remaining-space"></span> <span>重慶市沙坪壩區三峽廣場</span> <span class="fill-remaining-space"></span> </md-toolbar-row> </md-toolbar>
md-toolbar可以支持多行，其中每個md-toolbar-row就是單獨的一行，而且md-toolbar-row也是一個flex容器用法和md-toolbar相同
具體效果如下：
5.6 應用代碼完善
5.6.1 為頁眉組件添加方法使得在點擊按鈕時會觸發相應的處理邏輯
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { @Output() toggle = new EventEmitter<void>(); constructor() { } ngOnInit() { } openSidebar() { this.toggle.emit(); } }
5.6.2 在使用頁眉組件的父組件中編寫應用頁眉組件
<md-sidenav-container> <md-sidenav #sidenav1 mode=side align=start> <!-- 左邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <md-sidenav #sidenav2 mode=push align=end> <!-- 右邊的側邊欄 --> <app-sidebar></app-sidebar> </md-sidenav> <div class="site"> <header> <app-header (toggle)="sidenav1.toggle()"></app-header> <!-- 頁眉組件 --> </header> <main> <!-- <button (click)=sidenav1.toggle()>toggle划出關閉左側邊欄</button> --> <button (click)=sidenav2.open()>open划出右側邊欄</button> <app-main></app-main> <!-- 內容組件 --> </main> <footer> <app-footer></app-footer> <!-- 頁腳組件 --> </footer> </div> </md-sidenav-container>
效果如下：
