Material Design in AngularJS

By

Siddique Hameed
@siddii
http://github.com/siddii
https://www.linkedin.com/in/siddiquehameed

03/12/2015

Philosophy...

  • Material is a metaphor
  • Unified visual language across devices & platforms
  • Bold, graphical, intentional
  • It's a 3D world we live in after all...
  • Lights & shadows can mean a lot...
  • Meaningful motions (transitions & animations)
  • Real-world physics, authentic moving-objects & lucid transitions to create delightful UX
  • Touch, voice, mouse & keyboard are all first-class input methods
  • Responsive
  • Accessibility & BIDI(RTL & LTR language) Support

Commercial...

The Rubberband Effect

And the Material Design was born...

Material Properties
Do
Always 1 density percentage (dp) thick
Don't
Variable thickness
Material is Solid
Do

Input events cannot pass through material.
Don't

Events are passing through material.
Elements cannot occupy same point in space simultaneously
Do

Don't

Authentic motion
Do
Swift acceleration & gentle deceleration feels more authentic
Don't
Linear motion is mechanical
Consistent choreography
Do
Coordinated, orderly motion
Don't
Inconsistent disorderly motions seems random
Angular Material vs. Polymer

So, what is Web Components anyway?

  • Helps build custom HTML components. Remember Directives in Angular?
  • HTML imports are ways to reuse HTML components in another document
  • Templates. Remember using Templates in Angular?
  • Shadow DOM for better functional encapsulation & isolation
Angular Material Layout
  • Layout heavily based on flexbox.
  • Container Elements
    
    
    Left
    Right
    Above
    Below
  • Layout options like layout-margin, layout-padding, layout-fill, layout-wrap etc.
  • Responsive Layouts like layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg etc.
  • Kinda like Bootstrap Scaffolding
Angular Material Grid System
  • Use flex, offset & flex-order attributes
    
    
    [flex="33"]
    [flex="66"]
    [flex]
  • The flex attribute value is restricted to 33, 66, and multiples of five.
    For example: flex="5", flex="10", flex="25", "flex="33", flex="50", flex="66", flex="75", ....

Directives, directives, directives...

  • md-autocomplete
  • md-button
  • md-card
  • md-checkbox
  • md-divider
  • md-tab
  • md-tabs
  • md-progress-circular
  • md-progress-linear
  • etc.

Services

  • $mdBottomSheet
  • $mdDialog
  • $mdIcon
  • $mdToast
  • $mdSidenav
  • etc.

Demo Time!

References

Q & A