Angular Material Design Lite

Star
Overview Install Config Directives Upgrading Components

Overview

Angular Material Design Lite is an angular wrapper on top of Material Design Lite.

It provides directives for most (work in progress) Material Design Components.
  • Lorem
  • Ipsum
  • Dolor


Using Bower

bower install angular-material-design-lite

Then require the mdl module: 
angular.module('your-app', ['mdl']);

Config

Floating text labels and ripple effect are enabled by default.
Here's how you can disable them:
angular.module('your-app').config(function(mdlConfigProvider){
            mdlConfigProvider.floating = false;
            mdlConfigProvider.rippleEffect = false;
          });

Text Field

<input type="text" placeholder="First Name" ng-model="first_name" mdl-text-field/>

Checkbox

<mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox>

Radio

<mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio>
<mdl-radio label="Female" value="female" ng-model="gender"></mdl-radio>

Switch

<mdl-switch label="Notifications" ng-model="show_notifications"></mdl-switch>

Buttons

<mdl-button>Flat button</mdl-button>
<mdl-button theme="primary">Primary Flat button</mdl-button>
<mdl-button theme="accent">Accept Flat button</mdl-button>
<mdl-button-raised>Raised button</mdl-button-raised>
<mdl-button-raised theme="primary">Primary Raised button</mdl-button-raised>
<mdl-button-raised theme="accent">Accent Raised button</mdl-button-raised>
Flat button Primary Flat button Accept Flat button
Raised button Primary Raised button Accent Raised button 


<input type="text" mdl-text-field placeholder="Dynamic Progress bar" ng-model="progress"/>
<input type="text" mdl-text-field progress="{{progress}}"/>
<mdl-progress progress="20"></mdl-progress>





<text-area placeholder="Label here" mdl-text-field></textarea>


<mdl-spinner></mdl-spinner>
<mdl-spinner single-color="true"></mdl-spinner>




Layouts


<mdl-navigation-layout class="class list"
    mdl-header-title="'Header Title'"
    mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
    mdl-menu-title="'Menu Title'"
    mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
    mdl-header-transparent="true">
</mdl-layout>
                    

<mdl-navigation-layout class="class list"
    mdl-header-title="'Header Title'"
    mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
    mdl-menu-title="'Menu Title'"
    mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
    mdl-fixed-drawer="true"
    mdl-header-hidden="true">
</mdl-layout>
                    

<mdl-navigation-layout class="class list"
    mdl-header-title="'Header Title'"
    mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
    mdl-menu-title="'Menu Title'"
    mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
    mdl-fixed-header="true">
</mdl-layout>
                    

<mdl-navigation-layout class="class list"
    mdl-header-title="'Header Title'"
    mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
    mdl-menu-title="'Menu Title'"
    mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
    mdl-fixed-drawer="true"
    mdl-fixed-header="true">
</mdl-layout>

Upgrading Components

MDL Components inside ng-if or dynamic templates needs to be manually upgraded as per the [MDL docs](http://www.getmdl.io/started/index.html#dynamic)
You can use the mdl-upgrade attribute directive on elements that needs to be manually upgraded.
Check the example for more information. 
<mdl-button-raised mdl-upgrade ng-if="!!show">Component upgraded</mdl-button-raised>