angular-material-design-lite
Version:
Angular wrapper for Material Design Lite.
78 lines (69 loc) • 2.38 kB
HTML
<html>
<head>
<title>Playground</title>
<link rel="stylesheet" href="../bower_components/material-design-lite/material.min.css">
</head>
<body ng-app="app" style="padding: 50px;box-sizing:border-box;">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/material-design-lite/material.min.js"></script>
<script src="../dist/angular-material-design-lite.min.js"></script>
<script>
var app = angular.module('app', ['mdl']);
app.config(function (mdlConfigProvider){
"use strict";
// mdlConfigProvider.floating = false;
// mdlConfigProvider.rippleEffect = false;
});</script>
<input mdl-text-field type="text" placeholder="test" />
<br>
<textarea name="" mdl-text-field></textarea>
<br><br>
<mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox>
<br><br>
<mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio>
<br><br>
<mdl-radio label="Female" value="female" ng-model="gender"></mdl-radio>
<br><br>
<label>
<input type="checkbox" ng-model="show_notifications" /> Show Notifications<br><br>
</label>
<mdl-switch label="Notifications" ng-model="show_notifications"></mdl-switch>
<br><br>
<a mdl-button>Hello!</a>
<a mdl-button ng-disabled="true">Hello!</a>
<a mdl-button theme="primary">Hello!</a>
<a mdl-button theme="accent">Hello!</a>
<br>
<br>
<a mdl-button-raised>Hello!</a>
<a mdl-button-raised ng-disabled="true">Hello!</a>
<a mdl-button-raised theme="primary" ng-click="show = true">Show next button with mdl-upgrade!</a>
<a mdl-button-raised theme="accent" mdl-upgrade ng-if="!!show">Component registered using mdl-upgrade!</a>
<br>
<br>
<div>
<input type="text" placeholder="Dynamic Progress bar" ng-model="progress"/><br>
<br>
<mdl-progress progress="{{progress}}"></mdl-progress>
<br>
<mdl-progress progress="20"></mdl-progress>
</div>
<br>
<br>
<br>
<br>
<mdl-spinner></mdl-spinner>
<br>
<br>
<mdl-spinner single-color="true"></mdl-spinner>
<br><br>
<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'}]"
fixed-drawer="true"
fixed-header="true">
</mdl-layout>
</body>
</html>