Material Design Lite Tutorial
Material Design Lite Resources
Selected Reading
- MDL - Tooltips
- MDL - Textfields
- MDL - DataTable
- MDL - Switches
- MDL - Icons
- MDL - Radio Buttons
- MDL - Checkboxes
- MDL - Sliders
- MDL - Menus
- MDL - Spinners
- MDL - Progress Bars
- MDL - Cards
- MDL - Buttons
- MDL - Badges
- MDL - Footers
- MDL - Tabs
- MDL - Grids
- MDL - Layouts
- MDL - Environment Setup
- MDL - Overview
- MDL - Home
Material Design Lite Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MDL - Quick Guide
Material Design Lite - Quick Guide
Material Design Lite - Overview
What is Material Design Lite?
Material Design Lite (MDL is a UI component pbrary 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 pke browser portabipty, device independence, and graceful degradation.
Following are the sapent 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 speciapzed features pke cards, column layouts, spders, spinners, tabs, typography, and so on.
Can be used with or without any pbrary 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 pbrary 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 Depvery Network (CDN).
Local Installation
Follow these steps for the installation of MDL −
Go to 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">
<pnk rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">Features</a>
<a class = "mdl-navigation__pnk" href = "">About Us</a>
<a class = "mdl-navigation__pnk" href = "">Log Out</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content" style = "padding-left:100px;">Hello World!</span>
</main>
</span>
</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 Depvery Network (CDN). storage.googleapis.com provides content for the latest version.
We are using storage.googleapis.com CDN version of the pbrary 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">
<pnk 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>
<pnk rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">Features</a>
<a class = "mdl-navigation__pnk" href = "">About Us</a>
<a class = "mdl-navigation__pnk" href = "">Log Out</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content" style = "padding-left:100px;">Hello World!</span>
</main>
</span>
</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 −
<span> − 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 psts 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 apppcation 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 apgn elements inside a header or drawer. It grows to fill remaining space. Commonly used for apgning elements to the right. Optional on span following layout title. |
| 8 | mdl-navigation Identifies container as MDL navigation group. Required on nav element. |
| 9 | mdl-navigation__pnk Identifies anchor as MDL navigation pnk. 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 pnes. 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 pnk. 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 span as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer span.
mdl-layout--fixed-drawer − Makes the drawer always visible and open in larger screens.
mdl-layout__drawer − Identifies span as MDL layout drawer.
mdl-layout-title − Identifies layout title text.
mdl-navigation − Identifies span as MDL navigation group.
mdl-navigation__pnk − Identifies anchor as MDL navigation pnk.
mdl-layout__content − Identifies span as MDL layout content.
mdl_fixeddrawer.htm
<html>
<head>
<pnk 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>
<pnk 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).-->
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content" style = "padding-left:100px;">Hello World!</span>
</main>
</span>
</body>
</html>
Result
Verify the result.
Fixed Header
To create a template with fixed header following additional MDL class is used.
mdl-layout--fixed-header − Makes the header always visible, even in small screens.
mdl_fixedheader.htm
<html>
<head>
<pnk 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>
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to apgn navigation to the right -->
<span class = "mdl-layout-spacer"></span>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__pnk" href = ""
style = "color:gray">About</a>
</nav>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content">Hello World!</span>
</main>
</span>
</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>
<pnk 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>
<pnk 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. -->
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to apgn navigation to the right -->
<span class = "mdl-layout-spacer"></span>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__pnk" href = ""
style = "color:gray">About</a>
</nav>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "page-content">Hello World!</span>
</main>
</span>
</body>
</html>
Result
Verify the result.
Scrolpng Header
To create a template with scrolpng header, the following MDL classes are used.
mdl-layout--header--scroll − Makes the header scroll with the content.
mdl_scrolpngheader.htm
<html>
<head>
<pnk 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>
<pnk 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 -->
<span class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to apgn navigation to the right -->
<span class = "mdl-layout-spacer"></span>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span 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/>...
</span>
</main>
</span>
</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-layout__header--waterfall − Allows a "waterfall" effect with multiple header pnes.
mdl_waterfallheader.htm
<html>
<head>
<pnk 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>
<pnk 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. -->
<span class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to apgn navigation to the right -->
<span class = "mdl-layout-spacer"></span>
</span>
<!-- Bottom row, not visible on scroll -->
<span class = "mdl-layout__header-row">
<span class = "mdl-layout-spacer"></span>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span 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/>...
</span>
</main>
</span>
</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 pnk.
mdl-layout__tab-panel − Identifies container as a tab content panel.
mdl_scrollabletabheader.htm
<html>
<head>
<pnk 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>
<pnk 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. -->
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</span>
<!-- Tabs -->
<span 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>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<span class = "page-content">Tab 1 Contents</span>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<span class = "page-content">Tab 2 Contents</span>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<span class = "page-content">Tab 3 Contents</span>
</section>
</main>
</span>
</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-layout--fixed-tabs − Uses fixed tabs instead of the default scrollable tabs.
mdl_fixedtabheader.htm
<html>
<head>
<pnk 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>
<pnk 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. -->
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<span class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</span>
<!-- Tabs -->
<span 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>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<span class = "page-content">Tab 1 Contents</span>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<span class = "page-content">Tab 2 Contents</span>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<span class = "page-content">Tab 3 Contents</span>
</section>
</main>
</span>
</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/span 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 pne.
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 psts 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" span element. |
| 3 | mdl-cell Identifies a container as an MDL cell. Required on "inner" span 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" span 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" span 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" span 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" span elements. |
| 9 | mdl-cell--hide-desktop Hides the cell when in desktop mode. Optional for "inner" span elements. |
| 10 | mdl-cell--hide-tablet Hides the cell when in tablet mode. Optional for "inner" span elements. |
| 11 | mdl-cell--hide-phone Hides the cell when in phone mode. Optional for "inner" span elements. |
| 12 | mdl-cell--stretch Stretches the cell vertically to fill the parent, default; optional for "inner" span elements. |
| 13 | mdl-cell--top Apgns the cell to the top of the parent. Optional for "inner" span elements. |
| 14 | mdl-cell--middle Apgns the cell to the middle of the parent. Optional for "inner" span elements. |
| 15 | mdl-cell--bottom Apgns the cell to the bottom of the parent. Optional for "inner" span 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 span as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer span.
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 span as MDL layout drawer.
mdl-layout-title − Identifies layout title text.
mdl-navigation − Identifies span as MDL navigation group.
mdl-navigation__pnk − Identifies anchor as MDL navigation pnk.
mdl-layout__content − Identifies span as MDL layout content.
mdl-grid − Identifies span as an MDL grid component.
mdl-cell − Identifies span 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>
<pnk 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>
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</span>
</header>
<span class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__pnk" href = "">Home</a>
<a class = "mdl-navigation__pnk" href = "">About</a>
</nav>
</span>
<main class = "mdl-layout__content">
<span class = "mdl-grid">
<span class = "mdl-cell mdl-cell--1-col graybox">1</span>
<span class = "mdl-cell mdl-cell--1-col graybox">2</span>
<span class = "mdl-cell mdl-cell--1-col graybox">3</span>
<span class = "mdl-cell mdl-cell--1-col graybox">4</span>
<span class = "mdl-cell mdl-cell--1-col graybox">5</span>
<span class = "mdl-cell mdl-cell--1-col graybox">6</span>
<span class = "mdl-cell mdl-cell--1-col graybox">7</span>
<span class = "mdl-cell mdl-cell--1-col graybox">8</span>
<span class = "mdl-cell mdl-cell--1-col graybox">9</span>
<span class = "mdl-cell mdl-cell--1-col graybox">10</span>
<span class = "mdl-cell mdl-cell--1-col graybox">11</span>
<span class = "mdl-cell mdl-cell--1-col graybox">12</span>
</span>
<span class = "mdl-grid">
<span class = "mdl-cell mdl-cell--4-col graybox">1</span>
<span class = "mdl-cell mdl-cell--4-col graybox">2</span>
<span class = "mdl-cell mdl-cell--4-col graybox">3</span>
</span>
<span class = "mdl-grid">
<span class = "mdl-cell mdl-cell--6-col graybox">6</span>
<span class = "mdl-cell mdl-cell--4-col graybox">4</span>
<span class = "mdl-cell mdl-cell--2-col graybox">2</span>
</span>
<span class = "mdl-grid">
<span class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</span>
<span class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</span>
<span class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</span>
</span>
</main>
</span>
</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" span element. |
| 3 | mdl-js-tabs Sets basic MDL behavior to tabs container. Required on "outer" span element. |
| 4 | mdl-js-ripple-effect Adds ripple cpck effect to tab pnks. Optional; goes on "outer" span element. |
| 5 | mdl-tabs__tab-bar Identifies a container as an MDL tabs pnk bar. Required on first "inner" span element. |
| 6 | mdl-tabs__tab Identifies an anchor (pnk) as an MDL tab activator. Required on all pnks in first "inner" span element. |
| 7 | is-active Identifies a tab as the default display tab. Required on one (and only one) of the "inner" span (tab) elements. |
| 8 | mdl-tabs__panel Identifies a container as tab content. Required on each of the "inner" span (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 span as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer span.
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 span 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 pnk bar.
mdl-tabs__tab − Identifies an anchor (pnk) 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>
<pnk 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>
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</span>
</header>
<main class = "mdl-layout__content">
<span class = "mdl-tabs mdl-js-tabs">
<span 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>
</span>
<span class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</span>
<span class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</span>
<span class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</span>
</span>
</main>
</span>
</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 cpckable content, such as pnks.
MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the mega-footer and mini-footer. The following table psts 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" span element. |
| 3 | mdl-mega-footer__left-section Identifies container as a left section. Required for left section "inner" span 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" span element. |
| 6 | mdl-mega-footer__middle-section Identifies container as a footer middle section. Required for middle section "outer" span element. |
| 7 | mdl-mega-footer__drop-down-section Identifies container as a drop-down (vertical) content area. Required for drop-down "inner" span 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__pnk-pst Identifies an unordered pst as a drop-down (vertical) pst. 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" span element. |
| 11 | mdl-logo Identifies a container as a styled section heading. Required for "inner" span 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" span element. |
| 14 | mdl-mini-footer__pnk-pst Identifies an unordered pst as an inpne (horizontal) pst. Required for ul element sibpng to "mdl-logo" span element. |
| 15 | mdl-mini-footer__right-section Identifies container as a right section. Required for right section "inner" span 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 span as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer span.
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 span 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__pnk-pst − Identifies an unordered pst as an inpne (horizontal) pst.
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>
<pnk 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>
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</span>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<span class = "mdl-mega-footer__top-section">
<span 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>
</span>
<span class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</span>
</span>
<span class = "mdl-mega-footer__middle-section">
<span class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__pnk-pst">
<p><a href = "">Link A</a></p>
<p><a href = "">Link B</a></p>
</ul>
</span>
<span class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__pnk-pst">
<p><a href = "">Link C</a></p>
<p><a href = "">Link D</a></p>
</ul>
</span>
</span>
<span class = "mdl-mega-footer__bottom-section">
<span class = "mdl-logo">
Bottom Section
</span>
<ul class = "mdl-mega-footer__pnk-pst">
<p><a href = "">Link A</a></p>
<p><a href = "">Link B</a></p>
</ul>
</span>
</footer>
</main>
</span>
</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 span as an MDL component.
mdl-js-layout − Adds basic MDL behavior to outer span.
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 span 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__pnk-pst − Identifies an unordered pst as an inpne (horizontal) pst.
mdl-mini-footer__right-section − Identifies container as a right section.
mdl_minifooter.htm
<html>
<head>
<pnk 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>
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<span class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</span>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<span class = "mdl-mini-footer__left-section">
<span class = "mdl-logo">
Copyright Information
</span>
<ul class = "mdl-mini-footer__pnk-pst">
<p><a href = "#">Help</a></p>
<p><a href = "#">Privacy and Terms</a></p>
<p><a href = "#">User Agreement</a></p>
</ul>
</span>
<span 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>
</span>
</footer>
</main>
</span>
</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 psts 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 pnk element. |
| 2 | mdl-badge--no-background Apppes 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 pnk. |
Example
The following example will help you understand the use of the mdl-badge class to add notifications to span and pnk elements.
The MDL classes given below will be used in this example.
mdl-badge − Identifies element as an MDL badge component.
data-badge − Assigns a string value to badge. Icons can be assigned to it using HTML symbols.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts 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 cpck 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts down the available classes and their effects.
| Sr.No. | Class Name & Description |
|---|---|
| 1 | mdl-card Identifies span element as an MDL card container, required on "outer" span. |
| 2 | mdl-card--border Puts a border to the card section that it is appped to and is used on the "inner" spans. |
| 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" span; if omitted, no shadow is shown. |
| 4 | mdl-card__title Identifies span as a card title container and is required on "inner" title span. |
| 5 | mdl-card__title-text Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title span. |
| 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 span as a card media container and is required on "inner" media span. |
| 8 | mdl-card__supporting-text Identifies span as a card body text container and assigns appropriate text characteristics to body text and is required on "inner" body text span; text goes directly inside the span with no intervening containers. |
| 9 | mdl-card__actions Identifies span as a card actions container and assigns appropriate text characteristics to actions text and is required on "inner" actions span; content goes directly inside the span 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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;
apgn-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<span class = "wide-card mdl-card mdl-shadow--2dp">
<span class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</span>
<span 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.
</span>
<span class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</span>
<span 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>
</span>
</span>
</td>
<td>
<span class = "square-card mdl-card mdl-shadow--2dp">
<span class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</span>
<span 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.
</span>
<span class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</span>
<span 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>
</span>
</span>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<span class = "image-card mdl-card mdl-shadow--2dp">
<span class = "mdl-card__title mdl-card--expand"></span>
<span class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</span>
</span>
</td>
<td>
<span class = "event-card mdl-card mdl-shadow--2dp">
<span class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</span>
<span 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>
<span class = "mdl-layout-spacer"></span>
<i class = "material-icons">event</i>
</span>
</span>
</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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<span id = "progressbar1" class = "mdl-progress mdl-js-progress"></span>
<h4>Indeterminate Progress bar</h4>
<span id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></span>
<h4>Buffering Progress bar</h4>
<span id = "progressbar3" class = "mdl-progress mdl-js-progress"></span>
<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 psts 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<span class = "mdl-spinner mdl-js-spinner is-active"></span>
<h4>Single Color Spinner</h4>
<span class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></span>
</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 psts 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 inpne element. |
| 5 | mdl-menu Identifies an unordered pst 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 pst item elements. |
| 8 | mdl-js-ripple-effect Sets ripple cpck effect to option pnks and is optional; required on unordered pst element. |
| 9 | mdl-menu--top-left Sets the menu position above button, apgns left edge of menu with button and is optional; required on unordered pst element. |
| 10 | (none) By default, menu is positioned below button, apgns to the left edge with button. |
| 11 | mdl-menu--top-right Menu is positioned above button, apgns to the right edge with button, optional and goes on unordered pst element. |
| 12 | mdl-menu--bottom-right menu is positioned below button, apgns to the right edge with button, optional and goes on unordered pst 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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>
<span class = "container mdl-shadow--2dp">
<span 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">
<p class = "mdl-menu__item">Item #1</p>
<p class = "mdl-menu__item">Item #2</p>
<p disabled class = "mdl-menu__item">Disabled Item</p>
</ul>
</span>
<span class = "background"></span>
</span>
</td>
<td>
<span class = "container mdl-shadow--2dp">
<span class = "bar">
<span 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">
<p class = "mdl-menu__item">Item #1</p>
<p class = "mdl-menu__item">Item #2</p>
<p disabled class = "mdl-menu__item">Disabled Item</p>
</ul>
</span>
</span>
<span class = "background"></span>
</span>
</td>
<td>
<span class = "container mdl-shadow--2dp">
<span class = "background"></span>
<span 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">
<p class = "mdl-menu__item">Item #1</p>
<p class = "mdl-menu__item">Item #2</p>
<p disabled class = "mdl-menu__item">Disabled Item</p>
</ul>
</span>
</span>
</td>
<td>
<span class = "container mdl-shadow--2dp">
<span class = "background"></span>
<span class = "bar">
<span 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">
<p class = "mdl-menu__item">Item #1</p>
<p class = "mdl-menu__item">Item #2</p>
<p disabled class = "mdl-menu__item">Disabled Item</p>
</ul>
</span>
</span>
</span>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Material Design Lite - Spders
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 psts down the available classes and their effects.
| Sr.No. | Class Name & Description |
|---|---|
| 1 | mdl-spder Identifies input element as an MDL component and is required. |
| 2 | mdl-js-spder Sets basic MDL behavior to input element and is required. |
Example
The following example will help you understand the use of the mdl-spder classes to show the different types of spders.
mdl_spders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 Spder</td><td>Spder with initial value</td>
<td>Disabled Spder</td></tr>
<tr><td><input id = "spder1" class = "mdl-spder mdl-js-spder" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "spder2" class = "mdl-spder mdl-js-spder" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "spder3" class = "mdl-spder mdl-js-spder" 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: <span id = "message" >25</span>
</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 psts 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 cpck 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-spder 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts 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 cpck 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-spder 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts 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 cpck 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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_itapc</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_underpne</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 psts 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 cpck 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts 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/inspanidual 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 psts 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" span element. |
| 2 | mdl-js-textfield Sets basic MDL behavior to input and is required on "outer" span 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 Apppes floating label effect and is optional; goes on "outer" span 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 span as an MDL expandable text field container; used for expandable input fields, and is required on "outer" span element. |
| 8 | mdl-button Identifies label as an MDL icon button; used for expandable input fields, and is required on "outer" span s label element. |
| 9 | mdl-js-button Sets basic behavior to icon container; used for expandable input fields, and is required on "outer" span s label element. |
| 10 | mdl-button--icon Identifies label as an MDL icon container; used for expandable input fields, and is required on "outer" span 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" span element. |
| 12 | is-invapd Identifies the textfield as invapd 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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 = "#">
<span class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</span>
</form>
</td>
<td>
<form action = "#">
<span 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>
</span>
</form>
</td>
<td>
<form action = "#">
<span 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>
</span>
</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 = "#">
<span 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>
</span>
</form>
</td>
<td>
<form action = "#">
<span 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>
</span>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multipne Text Field</td><td>Expandable Multipne Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<span 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>
</span>
</form>
</td>
<td>
<form action = "#">
<span 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>
<span 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>
</span>
</span>
</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 psts 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>
<pnk rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<pnk 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>
<span id = "tooltip1" class = "icon material-icons">add</span>
<span class = "mdl-tooltip" for = "tooltip1">Follow</span>
</td>
<td>
<span id = "tooltip2" class = "icon material-icons">print</span>
<span class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</span>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multipne Tooltip</td></tr>
<tr>
<td>
<span id = "tooltip3" class = "icon material-icons">cloud_upload </span>
<span class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></span>
</td>
<td>
<span id = "tooltip4" class = "icon material-icons">share</span>
<span class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</span>
</td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
Advertisements