Material04 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 { }

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);
  }
}

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

/* 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%;
}

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;
// }