Material使用01 側邊欄MdSidenavModule、工具欄MdTollbarModule

前提準備:css

  構建好一個Angular2應用html

  熟悉CSS的flex佈局風格npm

 

1 利用flex進行佈局

  1.1 建立三個組件

    app-header  app-main  app-footerjson

  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.7bootstrap

    技巧01:使用 materil 時須要將material的主題引入到全局樣式中,引入全局樣式有兩種方式app

      方式一:在 styles.scss 中經過 @import 引入,例如     ide

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

      方式二:在 .angular-cli.json 文件中爲styles添加元素佈局

        參考博文:點擊前往flex

  2.2 在主模塊中引入MdSidenavModule模塊

    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 { }
主模塊

 

  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 { }
View Code

  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>
    &nbsp;
    <span>企業協做平臺</span>
</md-toolbar>
重構頁眉組件
<md-toolbar color=primary>
  <span class="fill-remaining-space"></span>
  <span>&copy; 庠序科技</span>
  <span class="fill-remaining-space"></span>
</md-toolbar>
重構頁腳組件

  效果圖以下:

    

  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中的三個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>&copy; 庠序科技</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();
  }

}
View Code

    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>
View Code

     效果以下:

      

相關文章
相關標籤/搜索