前提準(zhǔn)備：

　　構(gòu)建好一個(gè)Angular2應(yīng)用

　　熟悉CSS的flex布局風(fēng)格

?

1 利用flex進(jìn)行布局

　　1.1 創(chuàng)建三個(gè)組件

　　　　app-header　　app-main　　app-footer

　　1.2 在主組件中編寫大體結(jié)構(gòu)代碼

<div class="site"><header><app-header></app-header> <!-- 頁(yè)眉組件 --></header><main><app-main></app-main> <!-- 內(nèi)容組件 --></main><footer><app-footer></app-footer> <!-- 頁(yè)腳組件 --></footer> </div>

　　1.3 在全局樣式中編寫代碼實(shí)現(xiàn)flex風(fēng)格布局

/* You can add global styles to this file, and also import other style files */@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 導(dǎo)入material的內(nèi)建主體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快速構(gòu)建側(cè)邊欄

　　2.1 下載相關(guān)的依賴包

　　　　cnpm i --save @angular/material@2.0.0-beta.7

　　　　技巧01：使用 materil 時(shí)需要將material的主題引入到全局樣式中，引入全局樣式有兩種方式

　　　　　　方式一：在 styles.scss 中通過 @import 引入，例如　　　　　

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

　　　　　　方式二：在 .angular-cli.json 文件中為styles添加元素

　　　　　　　　參考博文：點(diǎn)擊前往

　　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提供的組件進(jìn)行側(cè)邊欄的構(gòu)建　

<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()">點(diǎn)擊劃出</button><app-main></app-main></main><footer><app-footer></app-footer></footer></div> </md-sidenav-container>

　　2.4 具體效果如下

　　　　

　　　　點(diǎn)擊按鈕后劃出側(cè)邊欄的效果如下：

　　　　

?

4 md-sidenav組件屬性詳解

　　4.1 mode屬性：設(shè)置側(cè)邊欄彈出的效果

　　　　over -> 覆蓋（默認(rèn)）

　　　　side -> 推擠

　　　　push -> 覆蓋 + 推擠

?　　

　　效果如下：

　　

　　4.2 align屬性：設(shè)置側(cè)邊欄的位置

　　　　start -> 左邊（默認(rèn)）

　　　　end -> 右邊

　　　　

　　　　效果如下：

　　　　

　　4.3 注意：material最多只支持兩個(gè)側(cè)邊欄

<md-sidenav-container><md-sidenav #sidenav1 mode=push align=start> <!-- 左邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><md-sidenav #sidenav2 mode=push align=end> <!-- 右邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><div class="site"><header><app-header></app-header> <!-- 頁(yè)眉組件 --></header><main><button (click)=sidenav1.open()>點(diǎn)擊劃出左側(cè)邊欄</button><button (click)=sidenav2.open()>點(diǎn)擊劃出右側(cè)邊欄</button><app-main></app-main> <!-- 內(nèi)容組件 --></main><footer><app-footer></app-footer> <!-- 頁(yè)腳組件 --></footer></div> </md-sidenav-container>

　　4.4 相關(guān)方法

　　　　open -> 打開側(cè)邊欄

　　　　toggle -> 打開、關(guān)閉

<md-sidenav-container><md-sidenav #sidenav1 mode=side align=start> <!-- 左邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><md-sidenav #sidenav2 mode=side align=end> <!-- 右邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><div class="site"><header><app-header></app-header> <!-- 頁(yè)眉組件 --></header><main><button (click)=sidenav1.toggle()>toggle劃出關(guān)閉左側(cè)邊欄</button><button (click)=sidenav2.open()>open劃出右側(cè)邊欄</button><app-main></app-main> <!-- 內(nèi)容組件 --></main><footer><app-footer></app-footer> <!-- 頁(yè)腳組件 --></footer></div> </md-sidenav-container>

?

5 利用MdToolbarModule對(duì)頁(yè)眉和頁(yè)腳進(jìn)行重構(gòu)

　　5.1 清除主組件中對(duì)頁(yè)眉和頁(yè)腳的樣式

?　　　　

/* You can add global styles to this file, and also import other style files */@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 導(dǎo)入material的內(nèi)建主體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項(xiàng)目自動(dòng)填充多余空間flex: 1 1 auto; }

　　5.2 在需要用到的模塊中導(dǎo)入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 { } View Code

　　5.3 利用md-toolbar組件重構(gòu)頁(yè)眉和頁(yè)腳組件中的內(nèi)容

　　　　md-toolbar組件是一個(gè)flex容器，可以直接使用flex容器相關(guān)的屬性

　　　　技巧01：md-toolbar會(huì)自動(dòng)在其內(nèi)部添加一個(gè)div元素，這個(gè)div元素才是一個(gè)flex容器，從源碼中可以看出

　　　　　　

?

　　　　md-toolbar的color屬性：設(shè)置白md-toolbar的顏色

　　　　　　primary -> 主色

　　　　　　accent -> 副色

　　　　　　warn -> 警告色

　　　　　　技巧：主色和副色是在主題中設(shè)置的

　　　　　　material主題色顯示：點(diǎn)擊前往

<md-toolbar color=primary><button (click)="openSidebar()">菜單</button>&nbsp;<span>企業(yè)協(xié)作平臺(tái)</span> </md-toolbar> 重構(gòu)頁(yè)眉組件 <md-toolbar color=primary><span class="fill-remaining-space"></span><span>&copy; 庠序科技</span><span class="fill-remaining-space"></span> </md-toolbar> 重構(gòu)頁(yè)腳組件

　　效果圖如下：

　　　　

　　5.4 代碼解釋01

<md-toolbar color=primary><span class="fill-remaining-space"></span><span>&copy; 庠序科技</span><span class="fill-remaining-space"></span> </md-toolbar>

　　md-toolbar中的三個(gè)span元素都是flex項(xiàng)目，其中第一個(gè)和第三個(gè)span元素由于使用了fill-remaining-space類，所以他們兩個(gè)元素會(huì)將剩余的空間進(jìn)行平均分配

　　fill-remaining-space對(duì)應(yīng)的代碼如下：　　　　

.fill-remaining-space { // flex項(xiàng)目自動(dòng)填充多余空間flex: 1 1 auto; }

　　flex布局相關(guān)：點(diǎn)擊前往

　　flex布局實(shí)戰(zhàn)：點(diǎn)擊前往

?　　5.5 代碼解釋02

<md-toolbar color=primary><span class="fill-remaining-space"></span><span>&copy; 庠序科技</span><span class="fill-remaining-space"></span><md-toolbar-row><span class="fill-remaining-space"></span><span>重慶市沙坪壩區(qū)三峽廣場(chǎng)</span><span class="fill-remaining-space"></span></md-toolbar-row> </md-toolbar>

　　md-toolbar可以支持多行，其中每個(gè)md-toolbar-row就是單獨(dú)的一行，而且md-toolbar-row也是一個(gè)flex容器用法和md-toolbar相同

　　具體效果如下：

　　　　

　　5.6 應(yīng)用代碼完善

　　　　5.6.1 為頁(yè)眉組件添加方法使得在點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)相應(yīng)的處理邏輯

　　　　　　

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();}} View Code

　　　　5.6.2 在使用頁(yè)眉組件的父組件中編寫應(yīng)用頁(yè)眉組件

　　　　　　

<md-sidenav-container><md-sidenav #sidenav1 mode=side align=start> <!-- 左邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><md-sidenav #sidenav2 mode=push align=end> <!-- 右邊的側(cè)邊欄 --><app-sidebar></app-sidebar></md-sidenav><div class="site"><header><app-header (toggle)="sidenav1.toggle()"></app-header> <!-- 頁(yè)眉組件 --></header><main><!-- <button (click)=sidenav1.toggle()>toggle劃出關(guān)閉左側(cè)邊欄</button> --><button (click)=sidenav2.open()>open劃出右側(cè)邊欄</button><app-main></app-main> <!-- 內(nèi)容組件 --></main><footer><app-footer></app-footer> <!-- 頁(yè)腳組件 --></footer></div> </md-sidenav-container> View Code

?　　　　效果如下：

　　　　　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/NeverCtrl-C/p/8081341.html

總結(jié)

以上是生活随笔為你收集整理的Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。