Angular Material Design Lite

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

<mdl-text-field label="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="Male" 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