Comprehensive application of MATERIAL04 Mdcardmodule and Mdbuttonmodule

Design requirements: Design a landing page

　　　　

1 Module Import 1.1 Import the Mdcardmodule and Mdbuttonmodule modules into the shared module

　　　　

Import {Ngmodule} from ' @angular/core '@angular/common '; import {   mdsidenavmodule,   Mdtoolbarmodule,  mdiconmodule,  mdbuttonmodule,  mdiconregistry,  mdcardmodule,  ' @ angular/material ' @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 {}

View Code1.2 Download the material dependent animation module through CNPM and import the animation module into the core module

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, Foot Ercomponent, Sidenavcomponent], exports: [Headercomponent, Footercomponent, Sidenavcomponent]}) Expor T class Coremodule {constructor (@Optional () @SkipSelf () Parentmodule:coremodule, Mdiconregistry:mdiconregistry , Domsanitizer:domsanitizer) {if(parentmodule) {Throw NewError (' Coremodule module already exists, please try to introduce it in the main module. ‘)} loadsvgresources (Mdiconregistry, Domsanitizer); }}

View Code

Tip 01: Other modules only need to import the shared module if you need to use Mdcardmodule and Mdbuttonmodule

Tip 02: The core module is loaded at the ANGUALR application only once and is loaded at project startup, and the shared module can be loaded multiple times

2 Md-card Components Detailed 2.1 Md-card components main structure

<md-card>  <md-card-header>    <md-card-title> Main Title </md-card-title>    < md-card-subtitle> subtitle </md-card-subtitle>  </md-card-header>  <md-card-content> Content < /md-card-content>  <md-card-actions> Behaviors </md-card-actions>  <md-card-footer> footer </ Md-card-footer></md-card>

3 Mdbuttonmodule 3.1 The form of a button in the Mdbuttonmodule module

3.1.1 Normal button: Md-button Md-raised-button Md-icon-button

3.1.2 Floating button: Md-fab md-mini-fab

3.2 Rules for using buttons in Mdbuttonmodule modules

　　　　

<button md-button> Normal button </button><br/><button md-raised-button> lift button </button><br/ ><!--icon button: Need to import mdiconmodule icon module, but also need to introduce Google's icon library on the main page--><button Md-icon-button><md-icon>menu </md-icon></button>   <br/><button md-fab > Floating button </button><br/><button md-mini-fab> Small Floating button </button>

View Code

Tip 02: Google font Icon library image reference, <link href= "//lib.baomitu.com/material-design-icons/3.0.1/iconfont/material-i Cons.min.css "rel=" stylesheet ">

4 Mdcardmodule, Mdbuttonmodule, mdinputmodule integrated Application 4.1 Import these three modules 4.2 download dependent animation module 4.3 The components provided by the user three modules in the login component complete the design

　　　　

<form> <md-card> <md-card-header> <md-card-title> Login Module </md-card-title>        <md-card-subtitle> login Information Input and submit </md-card-subtitle> </md-card-header> <md-card-content> <md-input-container class= "Full-width" > <span mdprefix>xiangxu.</span> <input MdI Nput type= "text" placeholder= "Please enter your mailbox"/> <span mdsuffix>@163.com</span> </md-input-cont ainer> <md-input-container class= "Full-width" > <input mdinput type= "password" placeholder= "Please enter      Your password "/> </md-input-container> <button Md-raised-button type=" button "> Login </button> </md-card-content> <md-card-actions class= "Text-right" > <p> not yet registered? &nbsp;<a href= "" > Register now </a></p> <p> forgot password? &nbsp;<a href= "" > Retrieve password </a></p> </md-card-actions> <!--&LT;MD-card-footer> footer </md-card-footer> </md-card> <md-card> <md-card-header>  <md-card-title> Daily couplets </md-card-title> <md-card-subtitle>do not aim forYour successifYou really want it. Just Stick to DoWhat's love and believeinch.</md-card-subtitle> </md-card-header>  &L T;md-card-content> less utilitarian pursuit, more not why the insistence. </md-card-content> </md-card></form>

4.4 Setting in a global CSS file

Fill the style of the whole line

　　　　　　

/*can add global styles to this file, and also import other style files*/@import' [Email protected]/material/prebuilt-themes/deeppurple-amber.css ';//Import the built-in body of materialHTML, 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 Project fills extra space automaticallyFlex:1 1Auto;}. full-Width {width:100%;}

View Code4.5 set in the CSS file of the login component

Set the form element to a flex container

Md-card Component Width and height

Align text to the right

　　　　　　

form {Display:flex; Flex-Direction:row; Justify-Content:center; Align-Items:center; Width:100%; Height:100%    ;} MD-Card {height:24em; Flex:0 020em;}. 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;// }

View Code

Comprehensive application of MATERIAL04 Mdcardmodule and Mdbuttonmodule