google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-11 12:25:38 +03:00
Code Issues Projects Releases Wiki Activity

Squashing all of @marcacohen 's work on partial component pages so far.

Browse Source 
The commit history was a bit too complicated, which made it hard to rebase.
This commit is contained in:
Sérgio Gomes 2015-06-02 14:59:21 +01:00 committed by Addy Osmani
parent 31ef34a7bb
commit e550304d4b
29 changed files with 154 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_pages/components.md
View File

@ -4,9 +4,9 @@ title: Components
bodyclass: components
include_prefix: ../
components:
- name: button
- name: button
title: Button
description: a button thingy
description: Variations on Material Design buttons (flat, raised, plain, colored, with ripple)
- name: card
title: Card
description: a card thingy

12
docs/_templates/component.html vendored
View File

@ -1,15 +1,5 @@
{% extends 'layout.html' %}
{% block content %}
<div class="component-description mdl-cell mdl-cell--12-col">
<div>
<a href="../">back to all </a>
</div>
<div>
<a href="demo.html" class="mdl-button mdl-js-button mdl-button--raised">demo</a></button>
</div>
{{content|safe}}
</div>
{{content|safe}}
{% endblock %}

17
docs/_templates/components.html vendored
View File

@ -3,6 +3,8 @@
{% block content %}
<link href="{{page.include_prefix}}/assets/components.css" rel="stylesheet">
<script src="{{page.include_prefix}}/assets/components.js"></script>
<link rel="stylesheet" href="/components/button/demo.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.css" rel="stylesheet">
<aside class="mdl-components">
<div class="scroll">
@ -18,10 +20,23 @@
{% for component in page.components -%}
<section class="mdl-component {{ component.name }} mdl-grid mdl-cell mdl-cell--12-col {% if loop.first %}active{%- endif %}">
<div class="mdl-cell mdl-cell--12-col">
<h1>{{ component.title }}<h1>
<h1>{{ component.title }}</h1>
<p>{{ component.description }}</p>
<br><br>
{% set demo = "../../src/" + component.name + "/demo.html" %}
{% include demo ignore missing %}
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
{% include doc ignore missing %}
</div>
</section>
{%- endfor %}
<script src="{{page.include_prefix}}/assets/components.js"></script>
<script src="../components/mdlComponentHandler.js"></script>
<script src="../components/tabs/tabs.js"></script>
<script src="../components/ripple/ripple.js"></script>
<script src="../components/third_party/rAF.js"></script>
<script src="../components/demo.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.js"></script>
{% endblock %}

2
gulpfile.js
View File

@ -259,7 +259,7 @@ function applyTemplate() {
gulp.task('components', function() {
return gulp.src(['./src/**/README.md'], {base: './src'})
// Add basic front matter.
.pipe($.header('---\nlayout: component\nbodyclass: components\ninclude_prefix: ../../\n---\n\n'))
.pipe($.header('---\nlayout: component\nbodyclass: component\ninclude_prefix: ../../\n---\n\n'))
.pipe($.frontMatter({property: 'page', remove: true}))
.pipe($.marked())
.pipe((function () {

16
src/animation/demo.html
View File

@ -1,17 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animations</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
</head>
<body class="demo-page demo-page--animation">
<div class="demo-preview-block demo-animation demo-js-animation">
<div class="demo-animation__container">
<div class="demo-animation__container-background">Click me to animate</div>
@ -20,5 +6,3 @@
</div>
</div>
<script src="demo.js"></script>
</body>
</html>

20
src/badge/demo.html
View File

@ -1,21 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Badge</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--badge">
<div class="demo-preview-block">
<section class="toolbar">
@ -60,5 +42,3 @@
</div>
</section>
</div>
</body>
</html>

2
src/button/README.md
View File

@ -1,5 +1,3 @@
#Button
##Introduction
The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.

29
src/button/demo.css
View File

@ -15,6 +15,31 @@
*/
.demo-button {
display: inline-block;
margin: 20px 20px 20px 0;
display: inline-block;
margin: 20px 20px 20px 0;
}
.highlight-button {
position:relative;
top: -50px;
left: 50%;
}
.adjust {
margin-left: -30px;
}
.highlight-text {
text-align: center;
}
.overflow-vis {
overflow: visible;
}
.codepen-mover-button {
position: absolute;
bottom: 5px;
right: 8px;
background-color: #cccccc;
}

133
src/button/demo.html
View File

@ -1,73 +1,62 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Buttons</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--button">
<div class="demo-preview-block">
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab"><i class="material-icons">add</i></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">create</i></button></div>
<h2>With Ripples</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">create</i></button></div>
<h2>.mdl-button--colored</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button></div>
<h2>With Ripples</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><i class="material-icons">add</i></button></div>
<h2>.mdl-button--primary</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--primary"><i class="material-icons">add</i></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--primary"><i class="material-icons">add</i></button></div>
<h2>.mdl-button--accent</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">add</i></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">add</i></button></div>
<h2>.mdl-button--mini-fab</h2>
<div class="demo-button"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></div>
<h2>Disabled</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect" disabled>Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" disabled><i class="material-icons">add</i></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" disabled><i class="material-icons">add</i></button></div>
<div class="demo-preview-block">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a class="mdl-tabs__tab overflow-vis is-active" href="#raised-button">
<button class="mdl-button mdl-js-button mdl-button--raised highlight-button adjust">BUTTON</button>
<span class="adjust">Raised Button</span>
</a>
<a class="mdl-tabs__tab overflow-vis" href="#plain-fab">
<button class="mdl-button mdl-js-button mdl-button--fab highlight-button adjust">+</button>
<span class="adjust">Plain FAB</span>
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored highlight-button adjust">+</button>
<span class="adjust">Colored FAB</span>
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab-ripple">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect highlight-button adjust">+</button>
<span class="adjust">FAB w/ Ripple</span>
</a>
<a class="mdl-tabs__tab overflow-vis" href="#colored-fab-disabled">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--disabled highlight-button adjust" disabled>+</button>
<span class="adjust">Disabled</span>
</a>
</div>
<br>
<div class="mdl-tabs__panel is-active" id="raised-button">
<pre><code class="language-markup">
&lt;link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="http://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--raised highlight-button"&gt;BUTTON&lt;/button&gt;
</code></pre>
</div>
<div class="mdl-tabs__panel" id="plain-fab">
<pre><code class="language-markup">
&lt;link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="http://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab"&gt;+&lt;/button&gt;
</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab">
<pre><code class="language-markup">
&lt;link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="http://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"&gt;+&lt;/button&gt;
</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab-ripple">
<pre><code class="language-markup">
&lt;link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="http://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"&gt;+&lt;/button&gt;
</code></pre>
</div>
<div class="mdl-tabs__panel" id="colored-fab-disabled">
<pre><code class="language-markup">
&lt;link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css"&gt;
&lt;script src="http://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
&lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled&gt;+&lt;/button&gt;
</code></pre>
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>
</div>

19
src/card/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--card">
<div class="demo-preview-block">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
@ -82,6 +66,3 @@
</div>
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>

19
src/checkbox/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checkbox</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--checkbox">
<div class="demo-preview-block">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
@ -37,6 +21,3 @@
</label>
</div>
<script src="../../material.js"></script>
</body>
</html>

36
src/demo.js Normal file
View File

@ -0,0 +1,36 @@
'use strict';
function addPenButtons() {
var codeList = document.getElementsByTagName('pre');
for (var i = 0, len = codeList.length; i < len; i++) {
var elem = codeList[i],
HTML = '',
CSS = '',
JS = '';
HTML = elem.innerText;
var data = {
html : HTML,
css : CSS,
js : JS
};
var JSONstring =
JSON.stringify(data)
// Quotes will screw up the JSON
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
var form =
'<form name="pen-form" action="http://codepen.io/pen/define" method="POST" target="_blank">' +
'<input type="hidden" name="data" value=\'' +
JSONstring +
'\'>' +
'<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" class="codepen-mover-button" width="40" height="40" value="Create New Pen with Prefilled Data">' +
'</form>';
elem.innerHTML += form;
}
}
addPenButtons();

23
src/footer/demo.html
View File

@ -1,22 +1,4 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Footer</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--footer">
<div class="demo-preview-block">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">
@ -103,5 +85,4 @@
<!-- Content for the right section -->
</div>
</footer>
</body>
</html>
</div>

20
src/grid/demo.html
View File

@ -1,19 +1,4 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--grid">
<div class="demo-preview-block">
<div class="demo-ruler mdl-grid">
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
@ -46,5 +31,4 @@
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4<br/>(6 tablet)</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2<br/>(4 phone)</div>
</div>
</body>
</html>
</div>

23
src/icon-toggle/demo.html
View File

@ -1,23 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon Toggles</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--icon-toggle">
<div class="demo-preview-block">
<div class="demo-icon-toggle-block">
@ -56,6 +36,3 @@
</label>
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>

24
src/layout/demo.html
View File

@ -1,21 +1,4 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel='stylesheet'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--layout">
<div class="demo-preview-block">
<h3>Default layout</h3>
<p>Uses a header for large screen sizes and a collapsible drawer for smaller
screens.</p>
@ -403,7 +386,4 @@
</main>
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>
</div>

24
src/list/demo.html
View File

@ -1,23 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lists</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
</head>
<body class="demo-page demo-page--list">
<div class="demo-preview-block">
<h3>Ordered</h3>
@ -97,7 +77,3 @@
</div>
</p>
</div>
</body>
</html>

23
src/menu/demo.html
View File

@ -1,23 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Menu</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--menu">
<div class="demo-preview-block">
<button id="clickable1" class="demo-menu-button-left mdl-button mdl-js-button mdl-button--icon">
@ -65,6 +45,3 @@
</ul>
</div>
<script src="../../material.js"></script>
</body>
</html>

2
src/palette/demo.html
View File

@ -432,5 +432,3 @@
</div>
</div>
</body>
</html>

19
src/progress/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress Bar</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--progress">
<div class="demo-preview-block">
<p>
@ -31,7 +15,6 @@
<div id="p3" class="mdl-js-progress"></div>
</p>
</div>
<script src="../../material.js"></script>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
this.widget.setProgress(44);
@ -41,5 +24,3 @@
this.widget.setBuffer(87);
});
</script>
</body>
</html>

20
src/radio/demo.html
View File

@ -1,18 +1,4 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Radio Button</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--radio">
<div class="demo-preview-block">
<p>A radio button can either be a primary action or a secondary action.</p>
@ -37,6 +23,4 @@
<span class="mdl-radio__label">Unavailable option</span>
</label>
</section>
<script src="../../material.js"></script>
</body>
</html>
</div>

21
src/shadow/demo.html
View File

@ -1,20 +1,4 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shadows</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
</head>
<body class="demo-page demo-page--shadow">
<div class="demo-preview-block">
<h3>Hand-Crafted Artisanal</h3>
@ -34,5 +18,4 @@
</div>
</body>
</html>
</div>

19
src/slider/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--slider">
<div class="demo-preview-block">
<p>
<input class="mdl-slider mdl-js-slider" type="range"
@ -32,6 +16,3 @@
min="0" max="100" value="10" tabindex="0" disabled/>
</p>
</div>
<script src="../../material.js"></script>
</body>
</html>

19
src/spinner/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spinner</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--spinner">
<div class="demo-preview-block">
<p>
@ -26,6 +10,3 @@
</p>
</div>
<script src="../../material.js"></script>
</body>
</html>

19
src/switch/demo.html
View File

@ -1,19 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
</head>
<body class="demo-page demo-page--switch">
<div class="demo-preview-block">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
@ -37,6 +21,3 @@
</label>
</div>
<script src="../../material.js"></script>
</body>
</html>

20
src/tabs/demo.html
View File

@ -1,20 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Content Tabs</title>
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
</head>
<body class="demo-page demo-page--tabs">
<div class="demo-preview-block">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
@ -52,6 +35,3 @@
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>

24
src/textfield/demo.html
View File

@ -1,23 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mdl-textfield</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--textfield">
<div class="demo-preview-block">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
@ -99,7 +79,3 @@
</form>
</div>
<script src="../../material.js"></script>
</body>
</html>

26
src/tooltip/demo.html
View File

@ -1,25 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tooltip</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body class="demo-page demo-page--tooltip">
<div class="demo-preview-block">
<div id="el1" class="icon material-icons">note_add</div>
@ -43,7 +21,3 @@
Element with a large tooltip
</div>
</div>
<script src="../../material.js"></script>
</body>
</html>

22
src/typography/demo.html
View File

@ -1,21 +1,3 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typography</title>
<link rel="stylesheet" href="../../material.css">
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="demo.css">
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
</head>
<body class="demo-page demo-page--typography">
<h2>Scale &amp; Basic Styles</h2>
<div class="demo-preview-block">
@ -244,7 +226,3 @@
<p class="mdl-typography--display-1-color-contrast">Display</p>
</div>
</div>
</body>
</html>