angular-material-design-lite
Version:
Angular wrapper for Material Design Lite.
306 lines (292 loc) • 17 kB
HTML
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Material Design Lite</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/material.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base" ng-app="app">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
<h3>Angular Material Design Lite</h3>
<div style=" position: absolute;top: 66px;right: 20px;">
<a class="github-button"
href="https://github.com/jadjoubran/angular-material-design-lite/stargazers"
data-icon="octicon-star" data-style="mega"
data-count-href="/jadjoubran/angular-material-design-lite/stargazers"
data-count-api="/repos/jadjoubran/angular-material-design-lite#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star jadjoubran/angular-material-design-lite on GitHub">Star</a>
</div>
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#install" class="mdl-layout__tab">Install</a>
<a href="#config" class="mdl-layout__tab">Config</a>
<a href="#directives" class="mdl-layout__tab">Directives</a>
<a href="#upgrading_components" class="mdl-layout__tab">Upgrading Components</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
</header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text">
<h4>Overview</h4>
Angular Material Design Lite is an angular wrapper on top of Material Design Lite.<br>
<br>
It provides directives for most (work in progress) Material Design Components.
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<br>
<br>
</div>
<div class="mdl-layout__tab-panel" id="install">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white"
style="background-image: url('http://bower.io/img/bower-logo.png');background-color: transparent;">
</header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text">
<h4>Using Bower</h4>
bower install angular-material-design-lite
</div>
</div>
</section>
<br>
Then require the <strong>mdl</strong> module:
<pre style="font-size:18px;">angular.module('your-app', ['mdl']);</pre>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="config">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Config</h4>
Floating text labels and ripple effect are enabled by default.<br>
Here's how you can disable them:<br>
<pre style="font-size:18px;">angular.module('your-app').config(function(mdlConfigProvider){
mdlConfigProvider.floating = false;
mdlConfigProvider.rippleEffect = false;
});
</pre>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="directives">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Text Field</h4>
<pre style="font-size:18px;"><input type="text" placeholder="First Name" ng-model="first_name" mdl-text-field/></pre>
<input type="text" placeholder="First Name" ng-model="first_name" mdl-text-field/>
<h4>Checkbox</h4>
<pre style="font-size:18px;"><mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox></pre>
<mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox>
<h4>Radio</h4>
<pre style="font-size:18px;"><mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio></pre>
<pre style="font-size:18px;"><mdl-radio label="Female" value="female" ng-model="gender"></mdl-radio></pre>
<mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio>
<mdl-radio label="Female" value="female" ng-model="gender"></mdl-radio>
<h4>Switch</h4>
<pre style="font-size:18px;"><mdl-switch label="Notifications" ng-model="show_notifications"></mdl-switch></pre>
<mdl-switch label="Notifications" ng-model="show_notifications"></mdl-switch>
<h4>Buttons</h4>
<pre style="font-size:18px;"><mdl-button>Flat button</mdl-button></pre>
<pre style="font-size:18px;"><mdl-button theme="primary">Primary Flat button</mdl-button></pre>
<pre style="font-size:18px;"><mdl-button theme="accent">Accept Flat button</mdl-button></pre>
<pre style="font-size:18px;"><mdl-button-raised>Raised button</mdl-button-raised></pre>
<pre style="font-size:18px;"><mdl-button-raised theme="primary">Primary Raised button</mdl-button-raised></pre>
<pre style="font-size:18px;"><mdl-button-raised theme="accent">Accent Raised button</mdl-button-raised></pre>
<mdl-button>Flat button</mdl-button>
<mdl-button theme="primary">Primary Flat button</mdl-button>
<mdl-button theme="accent">Accept Flat button</mdl-button>
<br>
<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>
<br>
<br>
<br>
<div>
<pre style="font-size:18px"><input type="text" mdl-text-field placeholder="Dynamic Progress bar" ng-model="progress"/></pre>
<pre style="font-size:18px" ng-non-bindable><input type="text" mdl-text-field progress="{{progress}}"/></pre>
<pre style="font-size:18px"><mdl-progress progress="20"></mdl-progress></pre>
<input type="text" mdl-text-field 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>
<pre style="font-size:18px"><text-area placeholder="Label here" mdl-text-field></textarea></pre>
<textarea placeholder="Label here" mdl-text-field></textarea>
<br>
<br>
<pre style="font-size:18px"><mdl-spinner></mdl-spinner></pre>
<pre style="font-size:18px"><mdl-spinner single-color="true"></mdl-spinner></pre>
<br>
<mdl-spinner></mdl-spinner>
<br>
<mdl-spinner single-color="true"></mdl-spinner>
<br>
<br>
<h4>Layouts</h4>
<br>
<pre style="font-size:18px">
<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>
</pre>
<div class="menu-containter">
<mdl-navigation-layout
class="demo-layout-transparent"
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>
</div>
<br>
<pre style="font-size:18px">
<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>
</pre>
<div class="menu-containter">
<mdl-navigation-layout
mdl-header-title="'Header Title'"
mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
mdl-menu-title="'Menu Title'"
mdl-fixed-drawer="true"
mdl-header-hidden="true"
>
</mdl-layout>
</div>
<br>
<pre style="font-size:18px">
<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>
</pre>
<div class="menu-containter">
<mdl-navigation-layout
mdl-header-title="'Header Title'"
mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
mdl-menu-title="'Menu Title'"
mdl-fixed-header="true"
>
</mdl-layout>
</div>
<br>
<pre style="font-size:18px">
<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>
</pre>
<div class="menu-containter">
<mdl-navigation-layout
mdl-header-title="'Header Title'"
mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]"
mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]"
mdl-menu-title="'Menu Title'"
mdl-fixed-drawer="true"
mdl-fixed-header="true"
>
</mdl-layout>
</div>
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="upgrading_components">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Upgrading Components</h4>
MDL Components inside <strong>ng-if</strong> or <strong>dynamic templates</strong> needs to be manually upgraded as per the [MDL docs](http://www.getmdl.io/started/index.html#dynamic)<br>
You can use the <strong>mdl-upgrade</strong> attribute directive on elements that needs to be manually upgraded.<br>
Check the <a href="https://github.com/jadjoubran/angular-material-design-lite/blob/master/examples/index.html" target="_blank">example</a> for more information.
<pre style="font-size:18px;"><mdl-button-raised mdl-upgrade ng-if="!!show">Component upgraded</mdl-button-raised></pre>
</div>
</section>
</div>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<div class="mdl-logo">Angular Material Design Lite</div>
<ul class="mdl-mini-footer--link-list">
<li><a href="https://github.com/jadjoubran/angular-material-design-lite">Source</a></li>
</ul>
</div>
</footer>
</div>
<script src="js/angular.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/angular-material-design-lite.min.js"></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script>
angular.module('app', ['mdl']);
</script>
</body>
</html>