material-design-lite
Version:
Material Design Components in CSS, JS and HTML
1,340 lines (1,080 loc) • 332 kB
HTML
<!doctype html>
<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>Material Design Lite</title>
<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">
<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Material Design Lite">
<link rel="icon" sizes="192x192" href="../assets/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon" href="../assets/ios-desktop.png">
<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
<meta name="theme-color" content="#263238">
<link rel="shortcut icon" href="../assets/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Page styles -->
<link rel="stylesheet" href="../assets/prism-default.css">
<link rel="stylesheet" href="../material.min.css">
<link rel="stylesheet" href="../assets/main.css">
<!-- Fonts -->
<link href='https://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="components">
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
// if (document.location.hostname !== 'localhost' &&
// document.location.hostname !== '127.0.0.1' &&
// document.location.hostname.search('.corp.') === -1) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25993200-9', 'auto');
// If a specific component page is loaded directly we'll attribute the
// page view to the specific component's page
if (window.location.pathname.indexOf('/components/') !== -1 &&
window.location.hash.indexOf('-section') !== -1) {
ga('send', 'pageview', '/components/' +
window.location.hash.split('#')[1].split('/')[0]);
} else {
ga('send', 'pageview');
}
// }
// Setup error tracking before anything else runs.
window.onerror = function(message, file, lineNumber, columnNumber, error) {
try {
if (error !== undefined) {
message = error.stack;
}
ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
} catch (e) {
// no-op
}
};
</script>
<div class="image-preloader"></div>
<div class="docs-layout mdl-layout mdl-js-layout">
<header class="docs-layout-header mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="docs-layout-title mdl-layout-title"><a href="../">Material<br>Design<br>Lite</a></span>
</div>
<div class="docs-navigation__container">
<nav class="docs-navigation mdl-navigation">
<a href="../index.html" class="mdl-navigation__link about">About</a>
<a href="../started/index.html" class="mdl-navigation__link started">Getting Started</a>
<a href="../templates/index.html" class="mdl-navigation__link templates">Templates</a>
<a href="../components/index.html" class="mdl-navigation__link components">Components</a>
<a href="../styles/index.html" class="mdl-navigation__link styles">Styles</a>
<a href="../customize/index.html" class="mdl-navigation__link customize">Customize</a>
<a href="../showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
<a href="../faq/index.html" class="mdl-navigation__link faq">FAQ</a>
<div class="spacer"></div>
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
<a href="../started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
<i class="material-icons"></i><span>Download</span>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
<i class="material-icons"></i>
</button>
</a>
</nav>
</div>
<i class="material-icons scrollindicator scrollindicator--right"></i>
<i class="material-icons scrollindicator scrollindicator--left"></i>
</header>
<main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
<div class="content mdl-grid mdl-grid--no-spacing" id="content">
<div class="subpageheader mdl-cell--12-col">Components</div>
<link href="../assets/components.css" rel="stylesheet">
<script src="../assets/snippets.js"></script>
<script src="../assets/components.js"></script>
<link rel="stylesheet" href="../components/demos.css">
<div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
<aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
<a href="#badges-section" class="mdl-components__link mdl-component badges">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_badges.png')">
</div>
<span class="mdl-components__link-text">Badges</span>
</a>
<a href="#buttons-section" class="mdl-components__link mdl-component buttons">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_buttons.png')">
</div>
<span class="mdl-components__link-text">Buttons</span>
</a>
<a href="#cards-section" class="mdl-components__link mdl-component cards">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_cards.png')">
</div>
<span class="mdl-components__link-text">Cards</span>
</a>
<a href="#dialog-section" class="mdl-components__link mdl-component dialog">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_dialog.png')">
</div>
<span class="mdl-components__link-text">Dialogs</span>
</a>
<a href="#layout-section" class="mdl-components__link mdl-component layout">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_layout.png')">
</div>
<span class="mdl-components__link-text">Layout</span>
</a>
<a href="#loading-section" class="mdl-components__link mdl-component loading">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_loading.png')">
</div>
<span class="mdl-components__link-text">Loading</span>
</a>
<a href="#menus-section" class="mdl-components__link mdl-component menus">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_menus.png')">
</div>
<span class="mdl-components__link-text">Menus</span>
</a>
<a href="#sliders-section" class="mdl-components__link mdl-component sliders">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_sliders.png')">
</div>
<span class="mdl-components__link-text">Sliders</span>
</a>
<a href="#snackbar-section" class="mdl-components__link mdl-component snackbar">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_snackbar.png')">
</div>
<span class="mdl-components__link-text">Snackbar</span>
</a>
<a href="#toggles-section" class="mdl-components__link mdl-component toggles">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_toggles.png')">
</div>
<span class="mdl-components__link-text">Toggles</span>
</a>
<a href="#tables-section" class="mdl-components__link mdl-component tables">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_tables.png')">
</div>
<span class="mdl-components__link-text">Tables</span>
</a>
<a href="#textfields-section" class="mdl-components__link mdl-component textfields">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_textfields.png')">
</div>
<span class="mdl-components__link-text">Text Fields</span>
</a>
<a href="#tooltips-section" class="mdl-components__link mdl-component tooltips">
<div class="mdl-components__link-image"
style="background-image: url('../assets/comp_tooltips.png')">
</div>
<span class="mdl-components__link-text">Tooltips</span>
</a>
</aside>
<main class="mdl-components__pages">
<section id="index-section" class="mdl-components-index mdl-components__page">
<div class="mdl-components-index-text mdl-grid">
<div class="mdl-components-text docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
<dl class="mdl-components-dl">
<dt class="mdl-components-dt">COMPONENTS</dt>
<dd class="mdl_components-dd">
Material Design Lite (MDL) is a library of components for web developers
based on Google's Material Design Philosophy: "A visual language for our
users that synthesizes the classic principles of good design with the
innovation and possibility of technology and science." Understanding the
goals and principles of Material Design is critical to the proper use of
the Material Design Lite components. If you have not yet read the
<a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design Introduction</a>
you should do so before attempting to use the components.
</dd>
</dl>
</div>
</div>
<div class="mdl-components-img"></div>
</section>
<section id="badges-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Badges</h3>
<p>Small status descriptors for UI elements.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-text">
<style>
.demo-badge__badge-on-icon-text .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
.demo-badge__badge-on-icon-text .mdl-badge.material-icons {
font-size: 32px;
}
</style>
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-icon-icon">
<style>
.demo-badge__badge-on-icon-icon .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
.demo-badge__badge-on-icon-icon .mdl-badge.material-icons {
font-size: 32px;
}
</style>
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Number
</div>
<div class="snippet-caption">
Icon
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-icon-text.html"><!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
</code><div class="codepen-extra-css"><style></style></div><code id="badge/badge-on-icon-icon.html"><div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-text">
<style>
.demo-badge__badge-on-text-text .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
</style>
<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-badge demo-badge__badge-on-text-icon">
<style>
.demo-badge__badge-on-text-icon .mdl-badge {
color: rgba(0, 0, 0, 0.24);
}
</style>
<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Number
</div>
<div class="snippet-caption">
Icon
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="badge/badge-on-text-text.html"><!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>
</code><div class="codepen-extra-css"><style></style></div><code id="badge/badge-on-text-icon.html"><!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>badge</strong> component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.</p>
<p>You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:</p>
<ul>
<li>A "New messages" notification might be followed by a badge containing the number of unread messages.</li>
<li>A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.</li>
<li>A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.</li>
</ul>
<p>A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.</p>
<p>Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.</p>
<h3 id="to-include-an-mdl-badge-component-">To include an MDL <strong>badge</strong> component:</h3>
<p> 1. Code an <code><a></code> (anchor/link) or a <code><span></code> element. Include any desired attributes and content.</p>
<pre><code class="language-markup"><a href="#">This link has a badge.</a>
</code></pre>
<p> 2. Add one or more MDL classes, separated by spaces, to the element using the <code>class</code> attribute.</p>
<pre><code class="language-markup"><a href="#" class="mdl-badge">This link has a badge.</a>
</code></pre>
<p> 3. Add a <code>data-badge</code> attribute and quoted string value for the badge.</p>
<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>
</code></pre>
<p>The badge component is ready for use.</p>
<blockquote>
<p><strong>Note:</strong> Because of the badge component's small size, the <code>data-badge</code> value should typically contain one to three characters. More than three characters will not cause an error, but some characters may fall outside the badge and thus be difficult or impossible to see. The value of the <code>data-badge</code> attribute is centered in the badge.</p>
</blockquote>
<h4 id="examples">Examples</h4>
<p>A badge inside a link.</p>
<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
</code></pre>
<p>A badge near, but not included in, a link.</p>
<pre><code class="language-markup"><a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>
</code></pre>
<p>A badge inside a link with too many characters to fit inside the badge.</p>
<pre><code class="language-markup"><a href="#" class="mdl-badge" data-badge="123456789">
This badge has too many characters.</a>
</code></pre>
<p>A badge inside a link with no badge background color.</p>
<pre><code class="language-markup"><a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
This badge has no background color.</a>
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-badge</code></td>
<td>Defines badge as an MDL component</td>
<td>Required on span or link</td>
</tr>
<tr>
<td><code>mdl-badge--no-background</code></td>
<td>Applies open-circle effect to badge</td>
<td>Optional</td>
</tr>
<tr>
<td><code>mdl-badge--overlap</code></td>
<td>Make the badge overlap with its container</td>
<td>Optional</td>
</tr>
<tr>
<td><code>data-badge="value"</code></td>
<td>Assigns string value to badge</td>
<td>Not a class, but a separate attribute; required on span or link</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="buttons-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Buttons</h3>
<p>Variations on Material Design buttons.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-colored">
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-colored-ripple">
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Colored FAB
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab-colored.html"><!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-colored-ripple.html"><!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab">
<!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-ripple">
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-disabled">
<!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Plain FAB
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab.html"><!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-ripple.html"><!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-disabled.html"><!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised">
<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-ripple">
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-disabled">
<!-- Raised disabled button-->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Raised Button
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/raised.html"><!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-ripple.html"><!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-disabled.html"><!-- Raised disabled button-->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-colored">
<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-accent">
<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__raised-ripple-accent">
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Colored button
</div>
<div class="snippet-caption">
Accent colored
</div>
<div class="snippet-caption">
With Ripples
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/raised-colored.html"><!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-accent.html"><!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/raised-ripple-accent.html"><!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat">
<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-ripple">
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-disabled">
<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Flat button
</div>
<div class="snippet-caption">
With ripple
</div>
<div class="snippet-caption">
Disabled
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/flat.html"><!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-ripple.html"><!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-disabled.html"><!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-primary">
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__flat-accent">
<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Primary colored flat
</div>
<div class="snippet-caption">
Accent colored flat
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/flat-primary.html"><!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/flat-accent.html"><!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__icon">
<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__icon-colored">
<!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">mood</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Icon button
</div>
<div class="snippet-caption">
Colored
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/icon.html"><!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/icon-colored.html"><!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class="material-icons">mood</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-mini">
<!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-button demo-button__fab-mini-colored">
<!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Mini FAB
</div>
<div class="snippet-caption">
Colored
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="button/fab-mini.html"><!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><code id="button/fab-mini-colored.html"><!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
</code><div class="codepen-extra-css"><style></style></div><div class="codepen-extra-css"><style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style></div><form class="codepen-button" action="https://codepen.io/pen/define" method="POST" target="_blank"></form></pre>
</div>
</div>
<!-- Adding the demo page -->
<style>
</style>
<script>
</script>
<div class="docs-text-styling docs-readme">
<h2 id="introduction">Introduction</h2>
<p>The Material Design Lite (MDL) <strong>button</strong> component is an enhanced version of the standard HTML <code><button></code> 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.</p>
<p>Buttons are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the button component's <a href="http://www.google.com/design/spec/components/buttons.html">Material Design specifications page</a> for details.</p>
<p>The available button display types are <em>flat</em> (default), <em>raised</em>, <em>fab</em>, <em>mini-fab</em>, and <em>icon</em>; any of these types may be plain (light gray) or <em>colored</em>, and may be initially or programmatically <em>disabled</em>. The <em>fab</em>, <em>mini-fab</em>, and <em>icon</em> button types typically use a small image as their caption rather than text.</p>
<h3 id="to-include-an-mdl-button-component-">To include an MDL <strong>button</strong> component:</h3>
<p> 1. Code a <code><button></code> element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate.</p>
<pre><code class="language-markup"><button>Save</button>
</code></pre>
<p> 2. Add one or more MDL classes, separated by spaces, to the button using the <code>class</code> attribute.</p>
<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
</code></pre>
<p>The button component is ready for use.</p>
<h4 id="examples">Examples</h4>
<p>A button with the "raised" effect.</p>
<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
</code></pre>
<p>A button with the "fab" effect.</p>
<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--fab">OK</button>
</code></pre>
<p>A button with the "icon" and "colored" effects.</p>
<pre><code class="language-markup"><button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>
</code></pre>
<h2 id="configuration-options">Configuration options</h2>
<p>The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects.</p>
<table>
<thead>
<tr>
<th>MDL class</th>
<th>Effect</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mdl-button</code></td>
<td>Defines button as an MDL component</td>
<td>Required</td>
</tr>
<tr>
<td><code>mdl-js-button</code></td>
<td>Assigns basic MDL behavior to button</td>
<td>Required</td>
</tr>
<tr>
<td>(none)</td>
<td>Applies <em>flat</em> display effect to button (default)</td>
<td></td>
</tr>
<tr>
<td><code>mdl-button--raised</code></td>
<td>Applies <em>raised</em> display effect</td>
<td>Mutually exclusive with <em>fab</em>, <em>mini-fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--fab</code></td>
<td>Applies <em>fab</em> (circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>mini-fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--mini-fab</code></td>
<td>Applies <em>mini-fab</em> (small fab circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>icon</em></td>
</tr>
<tr>
<td><code>mdl-button--icon</code></td>
<td>Applies <em>icon</em> (small plain circular) display effect</td>
<td>Mutually exclusive with <em>raised</em>, <em>fab</em>, and <em>mini-fab</em></td>
</tr>
<tr>
<td><code>mdl-button--colored</code></td>
<td>Applies <em>colored</em> display effect (primary or accent color, depending on the type of button)</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-button--primary</code></td>
<td>Applies <em>primary</em> color display effect</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-button--accent</code></td>
<td>Applies <em>accent</em> color display effect</td>
<td>Colors are defined in <code>material.min.css</code></td>
</tr>
<tr>
<td><code>mdl-js-ripple-effect</code></td>
<td>Applies <em>ripple</em> click effect</td>
<td>May be used in combination with any other classes</td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>Note:</strong> Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute <code>disabled</code>. <code><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button></code>. Alternatively, the <code>mdl-button--disabled</code> class can be used to achieve the same result.
This attribute may be added or removed programmatically via scripting.</p>
</blockquote>
</div>
</div>
</section>
<section id="cards-section" class="mdl-components__page mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="docs-text-styling component-title">
<h3>Cards</h3>
<p>Self-contained pieces of paper with data.</p>
</div>
<!-- Add warning, if the component has one -->
<!-- Generating snippets -->
<div class="snippet-group">
<div class="snippet-header">
<div class="snippet-demos">
<div class="snippet-demo-padding"></div>
<div class="snippet-demo">
<div class="snippet-demo-container demo-card demo-card__wide">
<!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
<div class="snippet-demo-padding"></div>
</div>
<div class="snippet-captions">
<div class="snippet-caption-padding"></div>
<div class="snippet-caption">
Wide
</div>
<div class="snippet-caption-padding"></div>
</div>
</div>
<div class="snippet-code">
<pre class="language-markup codepen-button-enabled"><code id="card/wide.html"><!-- Wide card with share menu button -->
<style>
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</code><div class="codepen-extra-css"><style></style></div><div class="cod