Material Design Lite - Quick Guide
Material Design Lite - Overview
What is Material Design Lite?
Material Design Lite (MDL is a UI component library created with CSS, JavaScript, and HTML. The MDL UI components help in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.
Following are the salient features of Material Design Lite −
In-built responsive designing.
Standard CSS with minimal footprint.
Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
Includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and so on.
Can be used with or without any library or development environment.
Cross-browser, and can be used to create reusable web components.
Responsive Design
Material Design Lite has in-built responsive designing so that the website created using Material Design Lite will redesign itself as per the device size.
Material Design Lite classes are created in such a way that the website can fit any screen size.
The websites created using Material Design Lite are fully compatible with PC, tablets, and mobile devices.
Standard CSS
Material Design Lite uses standard CSS only and it is very easy to learn.
There is no dependency on any external JavaScript library such as jQuery.
ExtensibleMaterial Design Lite is by design very minimal and flat.
It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
It supports shadows and bold colors.
The colors and shades remain uniform across various platforms and devices.
And most important of all, MDL is absolutely free to use.
Material Design Lite - Environment Setup
There are two ways to use Material Design Lite −
Local Installation − You can download the material.{primary}-{accent}.min.css and material.min.js files on your local machine and include it in your HTML code.
CDN Based Version − You can include the material.{primary}-{accent}.min.css and material.min.js files into your HTML code directly from the Content Delivery Network (CDN).
Local Installation
Follow these steps for the installation of MDL −
Go to https://www.getmdl.io/started/index.html to download the latest version available.
Then, put the downloaded material.min.js file in a directory of your website, e.g. /js and material.min.css in /css.
Example
Now you can include the css and js file in your HTML file as follows −
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
The above program will generate the following result −
CDN Based Version
You can include the js and css files into your HTML code directly from the Content Delivery Network (CDN). storage.googleapis.com provides content for the latest version.
We are using storage.googleapis.com CDN version of the library throughout this tutorial.
Example
Now, let us rewrite the above example using material.css and material.js from the Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
The above program will generate the following result −
Material Design Lite - Layouts
In this chapter, we will discuss the different layouts in Material Design Lite. HTML5 has the
following container elements −
<div> − Provides a generic container to HTML content.
<header> − Represents the header section.
<footer> − Represents the footer section.
<article> − Represents articles.
<section> − Provides a generic container for various types of sections.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the containers. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-layout
Identifies a container as an MDL component. Required on outer container element. |
| 2 |
mdl-js-layout
Adds basic MDL behavior to layout. Required on outer container element. |
| 3 |
mdl-layout__header
Identifies container as an MDL component. Required on header element. |
| 4 |
mdl-layout-icon
Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element. |
| 5 |
mdl-layout__header-row
Identifies container as MDL header row. Required on header content container. |
| 6 |
mdl-layout__title
Identifies layout title text. Required on layout title container. |
| 7 |
mdl-layout-spacer
Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for aligning elements to the right. Optional on div following layout title. |
| 8 |
mdl-navigation
Identifies container as MDL navigation group. Required on nav element. |
| 9 |
mdl-navigation__link
Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements. |
| 10 |
mdl-layout__drawer
Identifies container as MDL layout drawer. Required on drawer container element. |
| 11 |
mdl-layout__content
Identifies container as MDL layout content. Required on main element. |
| 12 |
mdl-layout__header--scroll
Makes the header scroll with the content. Optional on header element. |
| 13 |
mdl-layout--fixed-drawer
Makes the drawer always visible and open in larger screens. Optional on outer container element and not on drawer container element. |
| 14 |
mdl-layout--fixed-header
Makes the header always visible, even in small screens. Optional on outer container element. |
| 15 |
mdl-layout--large-screen-only
Hides an element on smaller screens. Optional on any descendant of mdl-layout. |
| 16 |
mdl-layout--small-screen-only
Hides an element on larger screens. Optional on any descendant of mdl-layout. |
| 17 |
mdl-layout__header--waterfall
Allows a "waterfall" effect with multiple header lines. Optional on header element. |
| 18 |
mdl-layout__header--transparent
Makes header transparent and draws on top of layout background. Optional on header element. |
| 19 |
mdl-layout__header--seamed
Uses a header without a shadow. Optional on header element. |
| 20 |
mdl-layout__tab-bar
Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout). |
| 21 |
mdl-layout__tab
Identifies anchor as MDL tab link. Required on tab bar anchor elements. |
| 22 |
is-active
Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element. |
| 23 |
mdl-layout__tab-panel
Identifies container as tab content panel. Required on tab section elements. |
| 24 |
mdl-layout--fixed-tabs
Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header. |
The following examples show the use of mdl-layout class to style various containers.
Fixed Drawer
To create a template with fixed drawer but no header, the following MDL classes are used.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-drawer − Makes the drawer always visible and open in larger screens.
mdl-layout__drawer − Identifies div as MDL layout drawer.
mdl-layout-title − Identifies layout title text.
mdl-navigation − Identifies div as MDL navigation group.
mdl-navigation__link − Identifies anchor as MDL navigation link.
mdl-layout__content − Identifies div as MDL layout content.
mdl_fixeddrawer.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Fixed Header
To create a template with fixed header following additional MDL class is used.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Fixed Header and Drawer
To create a template with fixed header and a fixed drawer, following additional MDL classes are used.
mdl-layout--fixed-drawer − Makes the drawer always visible and open in larger screens.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl_fixedheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Scrolling Header
To create a template with scrolling header, the following MDL classes are used.
mdl_scrollingheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Contracting Header
To create a template with a header that contracts as the page scrolls down, the following MDL class is used.
mdl_waterfallheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Fixed Header with Scrollable Tabs
To create a template with a header having scrollable tabs, the following MDL classes are used.
mdl-layout__tab-bar − Identifies container as an MDL tab bar.
mdl-layout__tab − Identifies anchor as an MDL tab link.
mdl-layout__tab-panel − Identifies container as a tab content panel.
mdl_scrollabletabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
Result
Verify the result.
Fixed Header with Fixed Tabs
To create a template with a header having fixed tabs, the following additional MDL class is used.
mdl_fixedtabheader.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Grids
The Material Design Lite (MDL) grid is a component for laying out content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size has predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined, with following exceptions:
If a grid cell is not fit for the row in one of the screen sizes, it flows into the following line.
If a grid cell has a specified column size equal to or larger than the number of columns for the screen size, it takes up the entire row.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the grid. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-layout
Identifies a container as an MDL component. Required on outer container element. |
| 2 |
mdl-grid
Identifies a container as an MDL grid component. Required on "outer" div element. |
| 3 |
mdl-cell
Identifies a container as an MDL cell. Required on "inner" div elements. |
| 4 |
mdl-grid--no-spacing
Updates the grid cells to have no margin between them. Optional for grid container. |
| 5 |
mdl-cell--N-col
This helps put the column size for the cell to N, N is 1-12 inclusive, defaults to 4; optional for "inner" div elements. |
| 6 |
mdl-cell--N-col-desktop
This helps put the column size for the cell to N in desktop mode only, N is 1-12 inclusive; optional for "inner" div elements. |
| 7 |
mdl-cell--N-col-tablet
This helps put the column size for the cell to N in tablet mode only, N is 1-8 inclusive; optional for "inner" div elements. |
| 8 |
mdl-cell--N-col-phone
This helps put the column size for the cell to N in phone mode only, N is 1-4 inclusive; optional for "inner" div elements. |
| 9 |
mdl-cell--hide-desktop
Hides the cell when in desktop mode. Optional for "inner" div elements. |
| 10 |
mdl-cell--hide-tablet
Hides the cell when in tablet mode. Optional for "inner" div elements. |
| 11 |
mdl-cell--hide-phone
Hides the cell when in phone mode. Optional for "inner" div elements. |
| 12 |
mdl-cell--stretch
Stretches the cell vertically to fill the parent, default; optional for "inner" div elements. |
| 13 |
mdl-cell--top
Aligns the cell to the top of the parent. Optional for "inner" div elements. |
| 14 |
mdl-cell--middle
Aligns the cell to the middle of the parent. Optional for "inner" div elements. |
| 15 |
mdl-cell--bottom
Aligns the cell to the bottom of the parent. Optional for "inner" div elements. |
Example
The following example will help you understand the use of the mdl-grid class to layout
contents on various screens.
The MDL classes given below will be used in this example.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout__drawer − Identifies div as MDL layout drawer.
mdl-layout-title − Identifies layout title text.
mdl-navigation − Identifies div as MDL navigation group.
mdl-navigation__link − Identifies anchor as MDL navigation link.
mdl-layout__content − Identifies div as MDL layout content.
mdl-grid − Identifies div as an MDL grid component.
mdl-cell − Identifies div as MDL cell.
mdl-cell--1-col − Sets the column size for the cell to that of 1 cell out of 12 cells in desktop screen size.
mdl-cell--2-col − Sets the column size for the cell to that of 2 cell out of 12 cells in desktop screen size.
mdl-cell--4-col − Sets the column size for the cell to that of 4 cell out of 12 cells in desktop screen size.
mdl-cell--6-col − Sets the column size for the cell to that of 6 cell out of 12 cells in desktop screen size.
mdl-cell--4-col-phone − Sets the column size for the cell to that of 4 cell out of 4 cells in phone screen size.
mdl-cell--6-col-tablet − Sets the column size for the cell to that of 6 cell out of 8 cells in tablet screen size.
mdl-cell--8-col-tablet − Sets the column size for the cell to that of 8 cell out of 8 cells in tablet screen size.
mdl_grid.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Tabs
The Material Design Lite (MDL) tab component is a user interface component which helps to show multiple screens in a single space in an exclusive manner.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The following table mentions the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-layout
Identifies a container as an MDL component. Required on outer container element. |
| 2 |
mdl-tabs
Identifies a tabs container as an MDL component. Required on "outer" div element. |
| 3 |
mdl-js-tabs
Sets basic MDL behavior to tabs container. Required on "outer" div element. |
| 4 |
mdl-js-ripple-effect
Adds ripple click effect to tab links. Optional; goes on "outer" div element. |
| 5 |
mdl-tabs__tab-bar
Identifies a container as an MDL tabs link bar. Required on first "inner" div element. |
| 6 |
mdl-tabs__tab
Identifies an anchor (link) as an MDL tab activator. Required on all links in first "inner" div element. |
| 7 |
is-active
Identifies a tab as the default display tab. Required on one (and only one) of the "inner" div (tab) elements. |
| 8 |
mdl-tabs__panel
Identifies a container as tab content. Required on each of the "inner" div (tab) elements. |
Example
The following example will help you understand the use of the mdl-tab class to layout contents on various tabs.
The MDL classes given below will be used in this example −
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout-title − Identifies layout title text.
mdl-layout__content − Identifies div as MDL layout content.
mdl-tabs − Identifies a tabs container as an MDL component.
mdl-js-tabs − Sets basic MDL behavior to tabs container.
mdl-tabs__tab-bar − Identifies a container as an MDL tabs link bar.
mdl-tabs__tab − Identifies an anchor (link) as an MDL tab activator.
is-active − Identifies a tab as the default display tab.
mdl-tabs__panel − Identifies a container as tab content.
mdl_tabs.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Footers
An MDL footer component comes in two primary forms: mega-footer and mini-footer. mega-footer contains more complex content than mini-footer. A mega-footer can represent multiple sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. The footers typically contain both informational and clickable content, such as links.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-mega-footer
Identifies container as an MDL mega-footer component. Required for footer element. |
| 2 |
mdl-mega-footer__top-section
Identifies container as a footer top section. Required for top section "outer" div element. |
| 3 |
mdl-mega-footer__left-section
Identifies container as a left section. Required for left section "inner" div element. |
| 4 |
mdl-mega-footer__social-btn
Identifies a decorative square within mega-footer. Required for button element (if used). |
| 5 |
mdl-mega-footer__right-section
Identifies container as a right section. Required for right section "inner" div element. |
| 6 |
mdl-mega-footer__middle-section
Identifies container as a footer middle section. Required for middle section "outer" div element. |
| 7 |
mdl-mega-footer__drop-down-section
Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" div elements. |
| 8 |
mdl-mega-footer__heading
Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section. |
| 9 |
mdl-mega-footer__link-list
Identifies an unordered list as a drop-down (vertical) list. Required for ul element inside drop-down section. |
| 10 |
mdl-mega-footer__bottom-section
Identifies container as a footer bottom section. Required for bottom section "outer" div element. |
| 11 |
mdl-logo
Identifies a container as a styled section heading. Required for "inner" div element in mega-footer bottom-section or mini-footer left-section. |
| 12 |
mdl-mini-footer
Identifies container as an MDL mini-footer component. Required for footer element. |
| 13 |
mdl-mini-footer__left-section
Identifies container as a left section. Required for left section "inner" div element. |
| 14 |
mdl-mini-footer__link-list
Identifies an unordered list as an inline (horizontal) list. Required for ul element sibling to "mdl-logo" div element. |
| 15 |
mdl-mini-footer__right-section
Identifies container as a right section. Required for right section "inner" div element. |
| 16 |
mdl-mini-footer__social-btn
Identifies a decorative square within mini-footer. Required for button element (if used). |
Now, let us see a few examples to understand the use of MDL footer classes to style footers.
Mega Footer
Let us discuss the use of the mdl-mega-footer class to layout contents in a footer. The following MDL classes will be used in this example.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout-title − Identifies layout title text.
mdl-layout__content − Identifies div as MDL layout content.
mdl-mega-footer − Identifies container as an MDL mega-footer component.
mdl-mega-footer__top-section − Identifies container as a footer top section.
mdl-mega-footer__left-section − Identifies container as a left section.
mdl-mega-footer__social-btn − Identifies a decorative square within mini-footer.
mdl-mega-footer__right-section − Identifies container as a right section.
mdl-mega-footer__middle-section − Identifies container as a footer middle section.
mdl-mega-footer__drop-down-section − Identifies container as a drop-down (vertical) content area.
mdl-mega-footer__heading − Identifies a heading as a mega-footer heading.
mdl-mega-footer__link-list − Identifies an unordered list as an inline (horizontal) list.
mdl-mega-footer__bottom-section − Identifies container as a footer bottom section.
mdl-logo − Identifies a container as a styled section heading.
mdl_megafooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>
Result
Verify the result.
Mini Footer
The following example will help you understand the use of the mdl-mini-footer class to layout contents in a footer.
The MDL classes given below will be used in this example.
mdl-layout − Identifies a div as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer div.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl-layout__header-row − Identifies container as MDL header row.
mdl-layout-title − Identifies layout title text.
mdl-layout__content − Identifies div as MDL layout content.
mdl-mini-footer − Identifies container as an MDL mini-footer component.
mdl-mini-footer__left-section − Identifies container as a left section.
mdl-logo - Identifies a container as a styled section heading.
mdl-mini-footer__link-list − Identifies an unordered list as an inline (horizontal) list.
mdl-mini-footer__right-section − Identifies container as a right section.
mdl_minifooter.htm
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Badges
An MDL badge component is an onscreen notification which can be a number or an icon. It is generally used to emphasize the number of items.
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements to the badges. The following table lists down the available classes and their
effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-badge
Identifies element as an MDL badge component. Required for span or link element. |
| 2 |
mdl-badge--no-background
Applies open-circle effect to badge and is optional. |
| 3 |
mdl-badge--overlap
Makes the badge overlap with its container and is optional. |
| 4 |
data-badge="value"
Assigns a string value to badge used as attribute; required on span or link. |
Example
The following example will help you understand the use of the mdl-badge class to add notifications to span and link elements.
The MDL classes given below will be used in this example.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>
Result
Verify the result.
Material Design Lite - Buttons
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements to the buttons. The following table lists down the available classes and their
effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-button
Sets button as an MDL component, required. |
| 2 |
mdl-js-button
Adds basic MDL behavior to button, required. |
| 3 |
(none)
Sets flat display effect to button, default. |
| 4 |
mdl-button--raised
Sets raised display effect; this is mutually exclusive with fab, mini-fab, and icon. |
| 5 |
mdl-button--fab
Sets fab (circular) display effect; this is mutually exclusive with raised, mini-fab, and icon. |
| 6 |
mdl-button--mini-fab
Sets mini-fab (small fab circular) display effect; this is mutually exclusive with raised, fab, and icon. |
| 7 |
mdl-button--icon
Sets icon (small plain circular) display effect; this is mutually exclusive with raised, fab, and mini-fab. |
| 8 |
mdl-button--colored
Sets colored display effect where the colors are defined in material.min.css. |
| 9 |
mdl-button--primary
Sets primary color display effect where the colors are defined in material.min.css. |
| 10 |
mdl-button--accent
Sets accent color display effect where the colors are defined in material.min.css. |
| 11 |
mdl-js-ripple-effect
Sets ripple click effect, can be used in combination with any other class. |
Example
The following example will help you understand the use of the mdl-button classes to show the different types of buttons.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Cards
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of cards. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-card
Identifies div element as an MDL card container, required on "outer" div. |
| 2 |
mdl-card--border
Puts a border to the card section that it is applied to and is used on the "inner" divs. |
| 3 |
mdl-shadow--2dp through mdl-shadow--16dp
Sets variable shadow depths (2, 3, 4, 6, 8, or 16) to card and is optional, goes on "outer" div; if omitted, no shadow is shown. |
| 4 |
mdl-card__title
Identifies div as a card title container and is required on "inner" title div. |
| 5 |
mdl-card__title-text
Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title div. |
| 6 |
mdl-card__subtitle-text
Puts text characteristics to a card subtitle and is optional. It should be a child of the title element. |
| 7 |
mdl-card__media
Identifies div as a card media container and is required on "inner" media div. |
| 8 |
mdl-card__supporting-text
Identifies div as a card body text container and assigns appropriate text characteristics to body text and is required on "inner" body text div; text goes directly inside the div with no intervening containers. |
| 9 |
mdl-card__actions
Identifies div as a card actions container and assigns appropriate text characteristics to actions text and is required on "inner" actions div; content goes directly inside the div with no intervening containers. |
Example
The following example will help you understand the use of the mdl-tooltip classes to show
different types of tooltips.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</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>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
HTML5 is the next major revision of the HTML standard
superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
HTML5 is a standard for structuring and presenting
content on the World Wide Web.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</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>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Progress Bars
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display the different types of progress bars. The following table mentions the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-js-progress
Sets basic MDL behavior to progress indicator and is a required class. |
| 2 |
mdl-progress__indeterminate
Sets animation to progress indicator and is an optional class. |
Example
The following example will help you understand the use of the mdl-js-progress classes to show the different types of progress bars.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>
Result
Verify the result.
Material Design Lite - Spinners
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display the different types of spinners. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-spinner
Identifies a container as MDL spinner component and is a required class. |
| 2 |
mdl-js-spinner
Sets basic MDL behavior to spinner and is a required class. |
| 3 |
is-active
Shows and animates the spinner and is optional. |
| 4 |
mdl-spinner--single-color
Uses a single color instead of changing colors and is optional. |
Example
The following example will help you understand the use of the mdl-spinner classes and the different types of spinners.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Menus
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display different types of menu. The following table lists down the available classes and their effects
| Sr.No. |
Class Name & Description |
| 1 |
mdl-button
Identifies button as an MDL component and is required on button element. |
| 2 |
mdl-js-button
Sets basic MDL behavior to button and is required on button element. |
| 3 |
mdl-button--icon
Sets icon to button and is required on button element. |
| 4 |
material-icons
Identifies span as a material icon and is required on an inline element. |
| 5 |
mdl-menu
Identifies an unordered list container as an MDL component and is required on ul element. |
| 6 |
mdl-js-menu
Sets basic MDL behavior to menu and is required on ul element. |
| 7 |
mdl-menu__item
Identifies buttons as MDL menu options and sets basic MDL behavior, required on list item elements. |
| 8 |
mdl-js-ripple-effect
Sets ripple click effect to option links and is optional; required on unordered list element. |
| 9 |
mdl-menu--top-left
Sets the menu position above button, aligns left edge of menu with button and is optional; required on unordered list element. |
| 10 |
(none)
By default, menu is positioned below button, aligns to the left edge with button. |
| 11 |
mdl-menu--top-right
Menu is positioned above button, aligns to the right edge with button, optional and goes on unordered list element. |
| 12 |
mdl-menu--bottom-right
menu is positioned below button, aligns to the right edge with button, optional and goes on unordered list element. |
Example
The following example will help you understand the use of the mdl-spinner classes to show the different types of spinners.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Sliders
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display the different types of menu. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-slider
Identifies input element as an MDL component and is required. |
| 2 |
mdl-js-slider
Sets basic MDL behavior to input element and is required. |
Example
The following example will help you understand the use of the mdl-slider classes to show
the different types of sliders.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>
Result
Verify the result.
Material Design Lite - Checkboxes
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display the different types of checkboxes. The following table lists down
the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-checkbox
Identifies label as an MDL component and is required on label element. |
| 2 |
mdl-js-checkbox
Sets basic MDL behavior to label and is required on label element. |
| 3 |
mdl-checkbox__input
Sets basic MDL behavior to checkbox and is required on input element (checkbox). |
| 4 |
mdl-checkbox__label
Sets basic MDL behavior to caption and is required on span element (caption). |
| 5 |
mdl-js-ripple-effect
Sets ripple click effect and is optional; goes on the label element and not on the input element (checkbox). |
Example
The following example will help you understand the use of the mdl-slider classes to show
the different types of check boxes.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Radio Buttons
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of radio buttons. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-radio
Identifies label as an MDL component and is required on label element. |
| 2 |
mdl-js-radio
Sets basic MDL behavior to label and is required on label element. |
| 3 |
mdl-radio__button
Sets basic MDL behavior to radio and is required on input element (radio button). |
| 4 |
mdl-radio__label
Sets basic MDL behavior to caption and is required on span element (caption). |
| 5 |
mdl-js-ripple-effect
Sets ripple click effect and is optional; goes on the label element and not on the input element (radio button). |
Example
The following example will help you understand the use of the mdl-slider classes to show
the different types of radio buttons.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Icons
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of checkboxes as icons. The following tables lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-icon-toggle
Identifies label as an MDL component and is required on label element. |
| 2 |
mdl-js-icon-toggle
Sets basic MDL behavior to label and is required on label element. |
| 3 |
mdl-icon-toggle__input
Sets basic MDL behavior to icon-toggle and is required on input element (icon-toggle). |
| 4 |
mdl-icon-toggle__label
Sets basic MDL behavior to caption and is required on on i element (icon). |
| 5 |
mdl-js-ripple-effect
Sets ripple click effect and is optional; goes on the label element and not on the input element (icon-toggle). |
Example
The following example showcases the use of mdl-icon-toggle classes to show different types of checkboxes as icons.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Switches
MDL provides a range of CSS classes to apply various predefined visual and behavioral
enhancements and display the different types of checkboxes as switches. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-switch
Identifies label as an MDL component and is required on label element. |
| 2 |
mdl-js-switch
Sets basic MDL behavior to label and is required on label element. |
| 3 |
mdl-switch__input
Sets basic MDL behavior to switch and is required on input element (switch). |
| 4 |
mdl-switch__label
Sets basic MDL behavior to caption and is required on input element (caption). |
| 5 |
mdl-js-ripple-effect
Sets ripple click effect and is optional; goes on the label element and not on the input element (switch). |
Example
The following example will help you understand the use of the mdl-switch classes and the
different types of checkboxes as switch.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - DataTable
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display a table as data-table. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-data-table
Identifies table as an MDL component and is required on table element. |
| 2 |
mdl-js-data-table
Sets basic MDL behavior to table and is required on table element. |
| 3 |
mdl-data-table--selectable
Sets all/individual selectable behavior (checkboxes) and is optional; goes on table element. |
| 4 |
mdl-data-table__cell--non-numeric
Sets text formatting to data cell and is optional; goes on both table header and table data cells. |
| 5 |
(none)
By default, sets the numeric formatting to header or data cell. |
Example
The following example will help you understand the use of the mdl-data-table classes to
show a data-table.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Textfields
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of text inputs. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-textfield
Identifies container as an MDL component and is required on "outer" div element. |
| 2 |
mdl-js-textfield
Sets basic MDL behavior to input and is required on "outer" div element. |
| 3 |
mdl-textfield__input
Identifies element as textfield input and is required on input or textarea element. |
| 4 |
mdl-textfield__label
Identifies element as textfield label and is required on label element for input or textarea elements. |
| 5 |
mdl-textfield--floating-label
Applies floating label effect and is optional; goes on "outer" div element. |
| 6 |
mdl-textfield__error
Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern. |
| 7 |
mdl-textfield--expandable
Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on "outer" div element. |
| 8 |
mdl-button
Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" div's label element. |
| 9 |
mdl-js-button
Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" div's label element. |
| 10 |
mdl-button--icon
Identifies label as an MDL icon container; used for expandable input fields, and is required on "outer" div's label element. |
| 11 |
mdl-input__expandable-holder
Identifies a container as an MDL component; used for expandable input fields, and is required on "inner" div element. |
| 12 |
is-invalid
Identifies the textfield as invalid on initial load and is optional on mdl-textfield element. |
Example
The following example will help you understand the use of the mdl-textfield classes to show the different types of textfields.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Tooltips
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of tooltips. The following table lists down the available classes and their effects.
| Sr.No. |
Class Name & Description |
| 1 |
mdl-tooltip
Identifies container as an MDL tooltip and is required on tooltip container element. |
| 2 |
mdl-tooltip--large
Sets large-font effect and is optional; goes on tooltip container element. |
Example
The following example will help you understand the use of the mdl-tooltip classes to show the different types of tooltips.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
