前提準備:css
構建好一個Angular2應用html
熟悉CSS的flex佈局風格npm
app-header app-main app-footerjson
<div class="site"> <header> <app-header></app-header> <!-- 頁眉組件 --> </header> <main> <app-main></app-main> <!-- 內容組件 --> </main> <footer> <app-footer></app-footer> <!-- 頁腳組件 --> </footer> </div>
/* 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;
}
cnpm i --save @angular/material@2.0.0-beta.7bootstrap
技巧01:使用 materil 時須要將material的主題引入到全局樣式中,引入全局樣式有兩種方式app
方式一:在 styles.scss 中經過 @import 引入,例如 ide
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
方式二:在 .angular-cli.json 文件中爲styles添加元素佈局
參考博文:點擊前往flex
import { MdSidenavModule } from '@angular/material';ui
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 { }
<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>
點擊按鈕後劃出側邊欄的效果以下:
over -> 覆蓋(默認)
side -> 推擠
push -> 覆蓋 + 推擠
效果以下:
start -> 左邊(默認)
end -> 右邊
效果以下:
<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>
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>
/* 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;
}
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 { }
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>
效果圖以下:
<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佈局實戰:點擊前往
<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相同
具體效果以下:
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(); } }
<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>
效果以下: