Angular Material

Understanding The Angular Material Design

Created by hmchung / @tma.com.vn

Themes

Default - Sky - Beige - Simple - Serif - Night
Moon - Solarized

Transition Styles

Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Rough Timeline of Web Technologies

http://www.youtube.com/watch?v=Q8TXgCzxEnw

Angular Material Directive

  • md-button
  • md-card
  • md-checkbox
  • md-content
  • md-divider
  • md-item
  • md-list
  • md-progress-circular
  • md-progress-liner
  • md-radio-button
  • md-radio-group
  • md-slidenav
  • md-slider
  • md-subheader
  • md-swipe-left
  • md-swip-right
  • md-swith
  • md-tab
  • md-tabs
  • md-text-float
  • md-toolbar
  • md-tooltip

Angular Material - Container Elements

responsive CSS layout is built on flexbox has layout element attribute directive, not CSS


I'm left.
I'm right.
I'm above.
I'm below.

I'm left.
I'm right.
I'm above.
I'm below.

Angular Material - Child Alignment

layout-align attribute takes two words:

Angular Material - Grid System

Angular Material - Responsive Layout

Angular Material - services

Sample apps

Resources

THE END

BY HMCHUNG / TMA