設計需求：設計一個登陸頁面

1 模塊導入

　　1.1 將MdCardModule和MdButtonModule模塊導入到共享模塊中

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule
 } from 
 
‘@angular/material‘;
 import { HttpModule } from ‘@angular/http‘;

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule
  ]
})
export class SharedModule { }
 

　　1.2 將material依賴的動畫模塊通過cnpm進行下載，並將動畫模塊導入到核心模塊中

　　　　cnpm install --save @angular/animation

import { NgModule, Optional, SkipSelf } from ‘@angular/core‘;
import { SharedModule } from ‘../shared/shared.module‘;
import { HeaderComponent } from ‘./header/header.component‘;
import { FooterComponent } from 
 
‘./footer/footer.component‘;
import { SidenavComponent } from ‘./sidenav/sidenav.component‘;

import { DomSanitizer } from ‘@angular/platform-browser‘;
import { MdIconRegistry } from ‘@angular/material‘;
import { loadSvgResources } from ‘../utils/loadSvgResources‘

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations‘;

@NgModule({
  imports: [
    SharedModule,
    BrowserAnimationsModule
  ],
  declarations: [
    HeaderComponent, 
    FooterComponent, 
    SidenavComponent
  ]
  ,
  exports: [
    HeaderComponent, 
    FooterComponent,
    SidenavComponent
  ]
})
export class CoreModule { 
  constructor(
    @Optional() @SkipSelf() parentModule: CoreModule,
    mdIconRegistry: MdIconRegistry,
    domSanitizer: DomSanitizer
  ) {
      if (parentModule) {
        throw new Error(‘CoreModule模塊已經存在，請盡在主模塊中進行引入。‘)
      }
      loadSvgResources(mdIconRegistry, domSanitizer);
  }
}

　　技巧01：其他模塊如果需要用到MdCardModule和MdButtonModule時只需要導入共享模塊即可

　　技巧02：核心模塊在angualr應用只加載一次而且是在項目啟動時加載的，共享模塊可以加載多次

2 md-card組件詳解

　　2.1 md-card組件主要結構

<md-card>
  <md-card-header>
    <md-card-title>主標題</md-card-title>
    <md-card-subtitle>副標題</md-card-subtitle>
  </md-card-header>
  <md-card-content>內容</md-card-content>
  <md-card-actions>行為</md-card-actions>
  <md-card-footer>頁腳</md-card-footer>
</md-card>

3 MdButtonModule詳解

　　3.1 MdButtonModule模塊中按鈕的形式

　　　　3.1.1 普通按鈕：md-button md-raised-button md-icon-button

　　　　3.1.2 浮動按鈕： md-fab md-mini-fab

　　3.2 MdButtonModule模塊中按鈕的使用規則

<button md-button>普通按鈕</button>
<br />
<button md-raised-button>提升按鈕</button>
<br />
<!-- 圖標按鈕：需要導入MdIconModule圖標模塊,而且還需要在主頁面引入谷歌的圖標庫 -->
<button md-icon-button><md-icon>menu</md-icon></button>   
<br />
<button md-fab >浮動按鈕</button>
<br />
<button md-mini-fab>小型浮動按鈕</button>

　　技巧02：谷歌字體圖標庫鏡像引用 -> <link href="//lib.baomitu.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">

4 MdCardModule 、 MdButtonModule 、 MdInputModule綜合應用

　　4.1 導入這三個模塊

　　4.2 下載依賴的動畫模塊

　　4.3 在登錄組件中使用者三個模塊提供的組件完成設計

<form>
    <md-card>
      <md-card-header>
        <md-card-title>登錄模塊</md-card-title>
        <md-card-subtitle>登錄信息錄入並提交</md-card-subtitle>
      </md-card-header>
      <md-card-content>
        <md-input-container class="full-width">
          <span mdPrefix>XiangXu.</span>
          <input mdInput type="text" placeholder="請輸入你的郵箱" />
          <span mdSuffix>@163.com</span>
        </md-input-container>
        <md-input-container class="full-width">
          <input mdInput type="password" placeholder="請輸入你的密碼" />
        </md-input-container>
        <button md-raised-button type="button">登錄</button>
      </md-card-content>
      <md-card-actions class="text-right">
        <p>還未註冊？&nbsp;<a href="">立即註冊</a></p>
        <p>忘記密碼？&nbsp;<a href="">找回密碼</a></p>
      </md-card-actions>
      <!-- <md-card-footer>頁腳</md-card-footer> -->
    </md-card>

    <md-card>
      <md-card-header>
        <md-card-title>每日佳句</md-card-title>
        <md-card-subtitle>Do not aim for your success if you really want it. Just stick to do what you love and believe in.</md-card-subtitle>
      </md-card-header>
      <img md-card-image src="/assets/img/car.jpg" />
      <md-card-content>少一些功利主義的追求，多一些不為什麽的堅持。</md-card-content>
    </md-card>
</form>

　　4.4 在全局CSS文件中設置

　　　　充滿整行的樣式

/* 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 {
    flex: 1;
}
footer {
    // background-color: skyblue; 
}

.fill-remaining-space { // flex項目自動填充多余空間
    flex: 1 1 auto;
}

.full-width {
    width: 100%;
}

　　4.5 在登錄組件的CSS文件中設置

　　　　將form元素設置成flex容器

　　　　md-card組件寬度和高度

　　　　文本向右對齊

form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%    ;

}

md-card {
    height: 24em;
    flex: 0 0 20em;
}

.text-right {
   text-align: end;
   margin: 10px;
}




















// form {
//     display: flex;
//     flex-direction: row;
//     justify-content: center;
//     align-items: center;
//     width: 100%; 
//     height: 100%;
// } 

// md-card {
//     height: 24em;
//     flex: 0 0 20em;
// }

// .text-right {
//     margin: 10px;
//     text-align: end;
// }

Material04 MdCardModule和MdButtonModule綜合運用