mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Squashing all of @marcacohen 's work on partial component pages so far.
The commit history was a bit too complicated, which made it hard to rebase.
This commit is contained in:
parent
31ef34a7bb
commit
e550304d4b
@ -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
12
docs/_templates/component.html
vendored
@ -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
17
docs/_templates/components.html
vendored
@ -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 %}
|
||||
|
@ -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 () {
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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&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">
|
||||
<link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css">
|
||||
<script src="http://storage.googleapis.com/materialdesignlite/material.min.js"></script>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised highlight-button">BUTTON</button>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="plain-fab">
|
||||
<pre><code class="language-markup">
|
||||
<link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css">
|
||||
<script src="http://storage.googleapis.com/materialdesignlite/material.min.js"></script>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab">+</button>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="colored-fab">
|
||||
<pre><code class="language-markup">
|
||||
<link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css">
|
||||
<script src="http://storage.googleapis.com/materialdesignlite/material.min.js"></script>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">+</button>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="colored-fab-ripple">
|
||||
<pre><code class="language-markup">
|
||||
<link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css">
|
||||
<script src="http://storage.googleapis.com/materialdesignlite/material.min.js"></script>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">+</button>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="mdl-tabs__panel" id="colored-fab-disabled">
|
||||
<pre><code class="language-markup">
|
||||
<link rel="stylesheet" href="http://storage.googleapis.com/materialdesignlite/material.css">
|
||||
<script src="http://storage.googleapis.com/materialdesignlite/material.min.js"></script>
|
||||
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled>+</button>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../material.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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
36
src/demo.js
Normal 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, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
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();
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -432,5 +432,3 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&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>
|
||||
|
@ -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&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body class="demo-page demo-page--typography">
|
||||
|
||||
<h2>Scale & 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>
|
||||
|
Loading…
Reference in New Issue
Block a user