際際滷

際際滷Share a Scribd company logo

Angular material vs material design light

?Download as PPTX, PDF?
?
Michael Rumiantsau
Michael Rumiantsau

This document compares Angular Material and Material Design Light (MDL), two libraries for implementing Google's Material Design specifications. Angular Material is designed for single-page Angular applications, while MDL is intended for static content websites. Both are open source and supported by Google. Key differences include Angular Material's use of directives and flexbox layouts versus MDL's use of HTML elements with classes and grid layouts. The document also provides brief histories of the libraries and examples of components in each.

1 of 22
Downloaded 20 times
Angular Material vs Material Design Light by Michael Rumianca?
History Google I/O - Material design principles (June 2014) Android 5.0 - First implementation of MD (November 2014) Angular Material - Release v0.9.0´ (~April 2015) Material Design Light - Release & open source v1.0.0 (July 2015)
Material design Light Vanilla CSS, HTML and JavaScript No dependencies Framework-agnostic library Lightweight (~27KB gzipped) The MDL sources are written in Sass using BEM Chrome, Firefox, Opera, Microsoft Edge, IE 10 +, IE 9 (CSS-only)
Components (~20) <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul>
Styles & Themes
Use MDL on dynamic websites <div id="container"/> <script> var button = document.createElement('button'); var textNode = document.createTextNode('Click Me!'); button.appendChild(textNode); button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; componentHandler.upgradeElement(button); document.getElementById('container').appendChild(button); </script>
Angular Material Angular.js Depends on angular, angular-animate and angular-aria. Targeted for all browsers with versions current-1 Latest release: v1.0.0-rc4
Components (~30) <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly"></md-chips>
Theming Declarative syntax Palette Color intentions
API & Services
Similarities...
Material Design and... ´ Material Design
<md-button class="md-raised md- primary">Primary</md-button> <button class="mdl-button mdl-js-button mdl- button--raised mdl-button-- colored">Button</button> Namespace ＾mdl-￣ Namespace ＾md-￣
Open source. Supported by Google, developed in collaboration with the Material Design team Open source. Supported by Google, developed in collaboration with Angular core team
´ and differences
Angular Material in single-page applicationsMaterial Design Light in static content websites
<div layout="row"> <div flex=￣33￣> [flex] </div> <div flex> [flex] </div> <div flex hide-sm> [flex] </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col">4</div> <div class="mdl-cell mdl-cell--4-col">4</div> <div class="mdl-cell mdl-cell--4-col">4</div> </div> Bootstrap-like column grid Flex grid
<md-datepicker ng-model="myDate" md- placeholder="Enter date"> </md-datepicker> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked> <span class="mdl-checkbox__label"> Checkbox </span> </label> Native HTML elements with classes Directives
Alternative?
Links http://www.google.com/design/spec/ https://material.angularjs.org/ http://www.getmdl.io/ https://elements.polymer-project.org/browse?package=paper-elements
Things we do https://github.com/flatlogic/angular-material-dashboard http://getmdltemplates.com/
Thank you for attention! http://micrum.me/ michael@micrum.me

More Related Content

Angular material vs material design light