HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Material Design Lite - 快速指南

Material Design Lite - 概述

什么是 Material Design Lite?

Material Design Lite (MDL) 是一个使用 CSS、JavaScript 和 HTML 创建的 UI 组件库。MDL UI 组件有助于构建有吸引力、一致且功能齐全的网页和 Web 应用程序，同时遵循现代 Web 设计原则，如浏览器可移植性、设备独立性和优雅降级。

以下是 Material Design Lite 的显著特点 −

  • 内置响应式设计。

  • 占用空间最小的标准 CSS。

  • 包括新版本的常见用户界面控件，如按钮、复选框和文本字段，这些控件经过调整以遵循 Material Design 概念。

  • 包括增强和专门的卡片、列布局、滑块、微调器、选项卡、排版等功能。

  • 可以使用或不使用任何库或开发环境。

  • 跨浏览器，可用于创建可重复使用的 Web 组件。

响应式设计

  • Material Design Lite 具有内置响应式设计，因此使用 Material Design Lite 创建的网站将根据设备尺寸重新设计。

  • Material Design Lite 类的创建方式使网站可以适应任何屏幕尺寸。

  • 使用 Material Design Lite 创建的网站与 PC、平板电脑和移动设备完全兼容。

标准 CSS

  • Material Design Lite 仅使用标准 CSS，非常容易学习。

  • 不依赖任何外部 JavaScript 库(如 jQuery)。

  • ExtensibleMaterial Design Lite 在设计上非常简约和扁平。

  • 在设计时考虑到添加新 CSS 规则比覆盖现有 CSS 规则要容易得多。

  • 它支持阴影和粗体颜色。

  • 颜色和色调在各种平台和设备上保持一致。

最重要的是，MDL 完全免费使用。

Material Design Lite - 环境设置

有两种方法可以使用 Material Design Lite −

  • 本地安装 − 您可以在本地机器上下载material.{primary}-{accent}.min.css和material.min.js文件，并将其包含在HTML代码中。

  • 基于CDN的版本 −您可以直接从内容分发网络 (CDN) 将material.{primary}-{accent}.min.css和material.min.js文件包含到您的HTML代码中。

本地安装

按照以下步骤安装MDL −

示例

现在，您可以按如下方式在 HTML 文件中包括 css 和 js 文件 −

<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>

上述程序将生成以下结果 −

基于 CDN 的版本

您可以直接从内容分发网络 (CDN) 将 js 和 css 文件包含到 HTML 代码中。storage.googleapis.com 提供最新版本的内容。

我们在本教程中始终使用 storage.googleapis.com CDN 版本的库。

示例

现在，让我们使用 Google CDN 中的material.css和material.js重写上述示例。

<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>

上述程序将生成以下结果 −

Material Design Lite - 布局

在本章中，我们将讨论 Material Design Lite 中的不同布局。HTML5 具有以下容器元素 −

  • <div> − 为 HTML 内容提供通用容器。

  • <header> − 表示页眉部分。

  • <footer> − 表示页脚部分。

  • <article> − 表示文章。

  • <section> −为各种类型的部分提供通用容器。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于容器。下表列出了可用的类及其效果。

Sr.No. 类名和说明
1

mdl-layout

将容器标识为 MDL 组件。外部容器元素上是必需的。
2

mdl-js-layout

向布局添加基本 MDL 行为。外部容器元素上是必需的。
3

mdl-layout__header

将容器标识为 MDL 组件。标题元素上是必需的。
4

mdl-layout-icon

用于添加应用程序图标。如果两者都可见，则被菜单图标覆盖。可选图标元素。
5

mdl-layout__header-row

将容器标识为 MDL 标题行。标题内容容器上必需。
6

mdl-layout__title

标识布局标题文本。布局标题容器上必需。
7

mdl-layout-spacer

用于对齐标题或抽屉内的元素。它会增长以填充剩余空间。通常用于将元素向右对齐。布局标题后面的 div 上可选。
8

mdl-navigation

将容器标识为 MDL 导航组。导航元素上是必需的。
9

mdl-navigation__link

将锚点标识为 MDL 导航链接。标题和/或抽屉锚点元素上是必需的。
10

mdl-layout__drawer

将容器标识为 MDL 布局抽屉。抽屉容器元素上必需。
11

mdl-layout__content

将容器标识为 MDL 布局内容。主元素上必需。
12

mdl-layout__header--scroll

使标题随内容滚动。标题元素上可选。
13

mdl-layout--fixed-drawer

使抽屉始终可见并在较大的屏幕上打开。外部容器元素上可选，但抽屉容器元素上不可选。
14

mdl-layout--fixed-header

使标题始终可见，即使在小屏幕上也是如此。外部容器元素上可选。
15

mdl-layout--large-screen-only

在较小的屏幕上隐藏元素。在 mdl-layout 的任何后代上都是可选的。
16

mdl-layout--small-screen-only

在较大的屏幕上隐藏元素。在 mdl-layout 的任何后代上都是可选的。
17

mdl-layout__header--waterfall

允许使用多个标题行实现"瀑布"效果。标题元素上可选。
18

mdl-layout__header--transparent

使标题透明并在布局背景上绘制。标题元素上可选。
19

mdl-layout__header--seamed

使用没有阴影的标题。标题元素上可选。
20

mdl-layout__tab-bar

将容器标识为 MDL 选项卡栏。标题内的容器元素上必需(选项卡式布局)。
21

mdl-layout__tab

将锚点标识为 MDL 选项卡链接。标签栏锚元素上是必需的。
22

is-active

将选项卡标识为默认活动选项卡。标签栏锚元素和相关选项卡部分元素上是可选的。
23

mdl-layout__tab-panel

将容器标识为选项卡内容面板。选项卡部分元素上必需。
24

mdl-layout--fixed-tabs

使用固定选项卡而不是默认的可滚动选项卡。外部容器元素上可选，而不是标题内的容器。

以下示例显示了如何使用 mdl-layout 类来设置各种容器的样式。

固定抽屉

要创建带有固定抽屉但没有标题的模板，请使用以下 MDL 类。

  • mdl-layout −将 div 标识为 MDL 组件。

  • mdl-js-layout − 向外部 div 添加基本 MDL 行为。

  • mdl-layout--fixed-drawer − 使抽屉始终可见并在更大的屏幕中打开。

  • mdl-layout__drawer − 将 div 标识为 MDL 布局抽屉。

  • mdl-layout-title − 标识布局标题文本。

  • mdl-navigation − 将 div 标识为 MDL 导航组。

  • mdl-navigation__link −将锚点标识为 MDL 导航链接。

  • mdl-layout__content − 将 div 标识为 MDL 布局内容。

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>

结果

验证结果。

固定标题

要创建带有固定标题的模板，请使用以下附加 MDL 类。

  • mdl-layout--fixed-header − 使标题始终可见，即使在小屏幕上也是如此。

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>

结果

验证结果。

固定标题和抽屉

要创建具有固定标题和固定抽屉的模板，请使用以下附加 MDL 类。

  • mdl-layout--fixed-drawer − 使抽屉始终可见并在较大的屏幕上打开。

  • mdl-layout--fixed-header − 使标题始终可见，即使在小屏幕上也是如此。

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>

结果

验证结果。

滚动标题

要创建带有滚动标题的模板，请使用以下 MDL 类。

  • mdl-layout--header--scroll − 使标题随内容滚动。

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>

结果

验证结果。

收缩标题

要创建一个标题在页面向下滚动时收缩的模板，请使用以下 MDL 类。

  • mdl-layout__header--waterfall − 允许使用多个标题行实现"瀑布"效果。

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>

结果

验证结果。

带有可滚动选项卡的固定标题

要创建带有可滚动选项卡的标题的模板，请使用以下 MDL 类。

  • mdl-layout__tab-bar − 将容器标识为 MDL 选项卡栏。

  • mdl-layout__tab − 将锚点标识为 MDL 选项卡链接。

  • mdl-layout__tab-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>

结果

验证结果。

带有固定选项卡的固定标题

要创建带有固定选项卡的标题的模板，请使用以下附加 MDL 类。

  • mdl-layout--fixed-tabs − 使用固定选项卡代替默认的可滚动选项卡。

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>

结果

验证结果。

Material Design Lite - 网格

Material Design Lite (MDL) 网格是用于为不同屏幕尺寸布局内容的组件。MDL 网格由容器/div 元素定义和封闭。网格在桌面尺寸屏幕上有 12 列，在平板电脑尺寸屏幕上有 8 列，在手机尺寸屏幕上有 4 列，其中每个尺寸都有预定义的边距和间距。单元格按顺序排列在一行中，按照定义的顺序排列，但以下情况除外:

  • 如果网格单元格不适合其中一种屏幕尺寸的行，它将流入下一行。

  • 如果网格单元格的指定列大小等于或大于屏幕尺寸的列数，它将占据整行。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于网格。下表列出了可用的类及其效果。

Sr.No. 类名和说明
1

mdl-layout

将容器标识为 MDL 组件。外部容器元素上必需。
2

mdl-grid

将容器标识为 MDL 网格组件。 "外部" div 元素上必需。
3

mdl-cell

将容器标识为 MDL 单元。"内部" div 元素上必需。
4

mdl-grid--no-spacing

更新网格单元，使它们之间没有边距。对于网格容器是可选的。
5

mdl-cell--N-col

这有助于将单元格的列大小设置为 N，N 为 1-12(含)，默认为 4;对于"内部"div 元素是可选的。
6

mdl-cell--N-col-desktop

这有助于仅在桌面模式下将单元格的列大小设置为 N，N 为 1-12(含);对于"内部"div 元素是可选的。
7

mdl-cell--N-col-tablet

这有助于仅在平板电脑模式下将单元格的列大小设置为 N，N 为 1-8(含);对于"内部"div 元素是可选的。
8

mdl-cell--N-col-phone

这有助于仅在手机模式下将单元格的列大小设置为 N，N 为 1-4(含);对于"内部"div 元素而言是可选的。
9

mdl-cell--hide-desktop

在桌面模式下隐藏单元格。对于"内部"div 元素而言是可选的。
10

mdl-cell--hide-tablet

在平板电脑模式下隐藏单元格。对于"内部"div 元素而言是可选的。
11

mdl-cell--hide-phone

在手机模式下隐藏单元格。对于"内部"div 元素是可选的。
12

mdl-cell--stretch

垂直拉伸单元格以填充父级，默认;对于"内部"div 元素是可选的。
13

mdl-cell--top

将单元格与父级顶部对齐。对于"内部"div 元素，可选。
14

mdl-cell--middle

将单元格与父元素的中间对齐。对于"内部"div 元素，可选。
15

mdl-cell--bottom

将单元格与父元素的底部对齐。对于"内部"div 元素而言是可选的。

示例

以下示例将帮助您理解如何使用 mdl-grid 类在各种屏幕上布局内容。

本示例将使用下面给出的 MDL 类。

  • mdl-layout − 将 div 标识为 MDL 组件。

  • mdl-js-layout − 向外部 div 添加基本 MDL 行为。

  • mdl-layout--fixed-header −使标题始终可见，即使在小屏幕上也是如此。

  • mdl-layout__header-row − 将容器标识为 MDL 标题行。

  • mdl-layout__drawer − 将 div 标识为 MDL 布局抽屉。

  • mdl-layout-title − 标识布局标题文本。

  • mdl-navigation − 将 div 标识为 MDL 导航组。

  • mdl-navigation__link − 将锚点标识为 MDL 导航链接。

  • mdl-layout__content −将 div 标识为 MDL 布局内容。

  • mdl-grid − 将 div 标识为 MDL 网格组件。

  • mdl-cell − 将 div 标识为 MDL 单元格。

  • mdl-cell--1-col − 将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 1 个单元格。

  • mdl-cell--2-col − 将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 2 个单元格。

  • mdl-cell--4-col −将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 4 个单元格。

  • mdl-cell--6-col − 将单元格的列大小设置为桌面屏幕大小的 12 个单元格中的 6 个单元格。

  • mdl-cell--4-col-phone − 将单元格的列大小设置为手机屏幕大小的 4 个单元格中的 4 个单元格。

  • mdl-cell--6-col-tablet − 将单元格的列大小设置为平板电脑屏幕大小的 8 个单元格中的 6 个单元格。

  • mdl-cell--8-col-tablet −将单元格的列大小设置为平板电脑屏幕尺寸中的 8 个单元格(共 8 个单元格)。

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>

结果

验证结果。

Material Design Lite - 选项卡

Material Design Lite (MDL) 选项卡组件是一个用户界面组件，有助于以独占方式在单个空间中显示多个屏幕。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于选项卡。下表列出了可用的类及其效果。

Sr.No. 类名和说明
1

mdl-layout

将容器标识为 MDL 组件。外部容器元素上必需。
2

mdl-tabs

将选项卡容器标识为 MDL 组件。"外部"div 元素上必需。
3

mdl-js-tabs

将基本 MDL 行为设置为选项卡容器。 "外部" div 元素上必需。
4

mdl-js-ripple-effect

向选项卡链接添加涟漪点击效果。可选;位于"外部" div 元素上。
5

mdl-tabs__tab-bar

将容器标识为 MDL 选项卡链接栏。第一个"内部"div 元素上必需。
6

mdl-tabs__tab

将锚点(链接)标识为 MDL 选项卡激活器。第一个"内部"div 元素中的所有链接上必需。
7

is-active

将选项卡标识为默认显示选项卡。一个(且只有一个)"内部"div(选项卡)元素需要该属性。
8

mdl-tabs__panel

将容器标识为选项卡内容。每个"内部"div(选项卡)元素都需要该属性。

示例

以下示例将帮助您了解如何使用 mdl-tab 类在各个选项卡上布局内容。

本示例中将使用下面给出的 MDL 类 −

  • mdl-layout −将 div 标识为 MDL 组件。

  • mdl-js-layout − 向外部 div 添加基本 MDL 行为。

  • mdl-layout--fixed-header − 使标题始终可见，即使在小屏幕上也是如此。

  • mdl-layout__header-row − 将容器标识为 MDL 标题行。

  • mdl-layout-title − 标识布局标题文本。

  • mdl-layout__content − 将 div 标识为 MDL 布局内容。

  • mdl-tabs −将选项卡容器标识为 MDL 组件。

  • mdl-js-tabs − 将基本 MDL 行为设置为选项卡容器。

  • mdl-tabs__tab-bar − 将容器标识为 MDL 选项卡链接栏。

  • mdl-tabs__tab − 将锚点(链接)标识为 MDL 选项卡激活器。

  • is-active − 将选项卡标识为默认显示选项卡。

  • mdl-tabs__panel − 将容器标识为选项卡内容。

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>

结果

验证结果。

Material Design Lite - 页脚

MDL 页脚组件有两种主要形式:mega-footer 和 mini-footer。mega-footer 包含的内容比 mini-footer 更复杂。mega-footer 可以表示由水平规则分隔的多个内容部分，而 mini-footer 则表示单个内容部分。页脚通常包含信息和可点击内容，例如链接。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于 mega-footer 和 mini-footer。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-mega-footer

将容器标识为 MDL mega-footer 组件。页脚元素必需。
2

mdl-mega-footer__top-section

将容器标识为页脚顶部部分。顶部"外部"div 元素必需。
3

mdl-mega-footer__left-section

将容器标识为左侧部分。左侧"内部"div 元素必需。
4

mdl-mega-footer__social-btn

标识超大页脚内的装饰方块。对于按钮元素是必需的(如果使用)。
5

mdl-mega-footer__right-section

将容器标识为右侧部分。对于右侧部分"内部"div 元素是必需的。
6

mdl-mega-footer__middle-section

将容器标识为页脚中间部分。中间部分"外部"div 元素必需。
7

mdl-mega-footer__drop-down-section

将容器标识为下拉(垂直)内容区域。下拉"内部"div 元素必需。
8

mdl-mega-footer__heading

将标题标识为超级页脚标题。下拉部分内的 h1 元素是必需的。
9

mdl-mega-footer__link-list

将无序列表标识为下拉(垂直)列表。下拉部分内的 ul 元素是必需的。
10

mdl-mega-footer__bottom-section

将容器标识为页脚底部。底部"外部"div 元素必需。
11

mdl-logo

将容器标识为样式化部分标题。大页脚底部或小页脚左侧的"内部"div 元素必需。
12

mdl-mini-footer

将容器标识为 MDL 迷你页脚组件。页脚元素必需。
13

mdl-mini-footer__left-section

将容器标识为左侧部分。左侧部分"内部"div 元素必需。
14

mdl-mini-footer__link-list

将无序列表标识为内联(水平)列表。对于"mdl-logo"div 元素的兄弟 ul 元素而言是必需的。
15

mdl-mini-footer__right-section

将容器标识为右侧部分。对于右侧部分"内部"div 元素而言是必需的。
16

mdl-mini-footer__social-btn

标识迷你页脚内的装饰方块。对于按钮元素是必需的(如果使用)。

现在，让我们看几个例子来了解如何使用 MDL 页脚类来设置页脚样式。

Mega Footer

让我们讨论如何使用 mdl-mega-footer 类来布局页脚中的内容。本例中将使用以下 MDL 类。

  • mdl-layout − 将 div 标识为 MDL 组件。

  • mdl-js-layout − 向外部 div 添加基本 MDL 行为。

  • mdl-layout--fixed-header −使标题始终可见，即使在小屏幕上也是如此。

  • mdl-layout__header-row − 将容器标识为 MDL 标题行。

  • mdl-layout-title − 标识布局标题文本。

  • mdl-layout__content − 将 div 标识为 MDL 布局内容。

  • mdl-mega-footer − 将容器标识为 MDL mega-footer 组件。

  • mdl-mega-footer__top-section − 将容器标识为页脚顶部部分。

  • mdl-mega-footer__left-section −将容器标识为左侧部分。

  • mdl-mega-footer__social-btn − 标识迷你页脚内的装饰方块。

  • mdl-mega-footer__right-section − 将容器标识为右侧部分。

  • mdl-mega-footer__middle-section − 将容器标识为页脚中间部分。

  • mdl-mega-footer__drop-down-section − 将容器标识为下拉(垂直)内容区域。

  • mdl-mega-footer__heading −将标题标识为超级页脚标题。

  • mdl-mega-footer__link-list − 将无序列表标识为内联(水平)列表。

  • mdl-mega-footer__bottom-section − 将容器标识为页脚底部部分。

  • mdl-logo − 将容器标识为样式部分标题。

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>

结果

验证结果。

迷你页脚

以下示例将帮助您了解如何使用 mdl-mini-footer 类在页脚中布局内容。

此示例中将使用下面给出的 MDL 类。

  • mdl-layout − 将 div 标识为 MDL 组件。

  • mdl-js-layout − 向外部 div 添加基本 MDL 行为。

  • mdl-layout--fixed-header − 使页眉始终可见，即使在小屏幕上也是如此。

  • mdl-layout__header-row −将容器标识为 MDL 标题行。

  • mdl-layout-title − 标识布局标题文本。

  • mdl-layout__content − 将 div 标识为 MDL 布局内容。

  • mdl-mini-footer − 将容器标识为 MDL mini-footer 组件。

  • mdl-mini-footer__left-section − 将容器标识为左侧部分。

  • mdl-logo - 将容器标识为样式化部分标题。

  • mdl-mini-footer__link-list −将无序列表标识为内联(水平)列表。

  • mdl-mini-footer__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>

结果

验证结果。

Material Design Lite - 徽章

MDL 徽章组件是屏幕上的通知，可以是数字或图标。它通常用于强调项目的数量。

MDL 提供了一系列 CSS 类，用于将各种预定义的视觉和行为增强功能应用于徽章。下表列出了可用的类及其效果。

Sr.No. 类名和说明
1

mdl-badge

将元素标识为 MDL 徽章组件。对于 span 或 link 元素是必需的。
2

mdl-badge--no-background

将开圆效果应用于徽章，是可选的。
3

mdl-badge--overlap

使徽章与其容器重叠，是可选的。
4

data-badge="value"

为徽章分配一个字符串值用作属性;span 或 link 上必需。

示例

以下示例将帮助您了解如何使用 mdl-badge 类向 span 和 link 元素添加通知。

此示例中将使用下面给出的 MDL 类。

  • mdl-badge − 将元素标识为 MDL 徽章组件。

  • data-badge − 为徽章分配一个字符串值。可以使用 HTML 符号为其分配图标。

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>

结果

验证结果。

Material Design Lite - 按钮

MDL 提供了一系列 CSS 类，用于将各种预定义的视觉和行为增强功能应用于按钮。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-button

将按钮设置为 MDL 组件，必需。
2

mdl-js-button

向按钮添加基本 MDL 行为，必需。
3

(无)

将平面显示效果设置为按钮，默认。
4

mdl-button--raised

设置凸起显示效果;与 fab、mini-fab 和 icon 互斥。
5

mdl-button--fab

设置 fab(圆形)显示效果;这与 raised、mini-fab 和 icon 互斥。
6

mdl-button--mini-fab

设置 mini-fab(小圆形 fab)显示效果;这与 raised、fab 和 icon 互斥。
7

mdl-button--icon

设置 icon(小圆形 fab)显示效果;这与 raised、fab 和 mini-fab 互斥。
8

mdl-button--colored

设置彩色显示效果，其中颜色在material.min.css中定义。
9

mdl-button--primary

设置原色显示效果，其中颜色在material.min.css中定义。
10

mdl-button--accent

设置强调色显示效果，其中颜色在material.min.css中定义。
11

mdl-js-ripple-effect

设置涟漪点击效果，可与任何其他类结合使用。

示例

以下示例将帮助您了解如何使用mdl-button类来显示不同类型的按钮。

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>

结果

验证结果。

Material Design Lite - 卡片

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的卡片。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-card

将 div 元素标识为 MDL 卡片容器，在"外部"div 上是必需的。
2

mdl-card--border

将边框添加到应用该边框的卡片部分，并在"内部"div 上使用。
3

mdl-shadow--2dp through mdl-shadow--16dp

为卡片设置可变阴影深度(2、3、4、6、8 或 16)，可选，位于"外部"div 上;如果省略，则不显示阴影。
4

mdl-card__title

将 div 标识为卡片标题容器，并且是"内部"标题 div 上必需的。
5

mdl-card__title-text

将适当的文本特征放入卡片标题，并且是标题 div 内的 head 标签(H1 - H6)上必需的。
6

mdl-card__subtitle-text

将文本特征添加到卡片副标题中，是可选的。它应该是 title 元素的子元素。
7

mdl-card__media

将 div 标识为卡片媒体容器，并且在"内部"媒体 div 上是必需的。
8

mdl-card__supporting-text

将 div 标识为卡片正文文本容器并为正文分配适当的文本特征，并且在"内部"正文文本 div 上是必需的;文本直接进入 div 内部，中间没有容器。
9

mdl-card__actions

将 div 标识为卡片操作容器，并为操作文本分配适当的文本特征，并且是"内部"操作 div 所必需的;内容直接进入 div 内部，中间没有容器。

示例

以下示例将帮助您了解如何使用 mdl-tooltip 类来显示不同类型的工具提示。

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>

结果

验证结果。

Material Design Lite - 进度条

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的进度条。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-js-progress

将基本 MDL 行为设置为进度指示器，是必需的类。
2

mdl-progress__indeterminate

将动画设置为进度指示器，是可选的类。

示例

以下示例将帮助您了解如何使用 mdl-js-progress 类来显示不同类型的进度条。

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>

结果

验证结果。

Material Design Lite - Spinners

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的 Spinners。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-spinner

将容器标识为 MDL 微调器组件，是必需的类。
2

mdl-js-spinner

将基本 MDL 行为设置为微调器，是必需的类。
3

is-active

显示并动画微调器，是可选。
4

mdl-spinner--single-color

使用单一颜色而不是更改颜色，是可选的。

示例

以下示例将帮助您了解 mdl-spinner 类的使用以及不同类型的微调器。

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>

结果

验证结果。

Material Design Lite - 菜单

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的菜单。下表列出了可用的类及其效果

Sr.No. 类名 &描述
1

mdl-button

将按钮标识为 MDL 组件，并且是按钮元素所必需的。
2

mdl-js-button

将基本 MDL 行为设置为按钮，并且是按钮元素所必需的。
3

mdl-button--icon

将图标设置为按钮，并且是按钮元素所必需的元素。
4

material-icons

将 span 标识为材料图标，并且是内联元素上必需的。
5

mdl-menu

将无序列表容器标识为 MDL 组件，并且是 ul 元素上必需的。
6

mdl-js-menu

将基本 MDL 行为设置为菜单，并且是 ul 上必需的元素。
7

mdl-menu__item

将按钮标识为 MDL 菜单选项并设置基本 MDL 行为，列表项元素上必需。
8

mdl-js-ripple-effect

将涟漪点击效果设置为选项链接，是可选的;无序列表元素上必需。
9

mdl-menu--top-left

设置按钮上方的菜单位置，将菜单左边缘与按钮对齐，是可选的;无序列表元素上必需。
10

(无)

默认情况下，菜单位于按钮下方，与按钮左边缘对齐。
11

mdl-menu--top-right

菜单位于按钮上方，与按钮右边缘对齐，可选，位于无序列表元素上。
12

mdl-menu--bottom-right

菜单位于按钮下方，与按钮右边缘对齐，可选，并位于无序列表元素上。

示例

以下示例将帮助您了解如何使用 mdl-spinner 类来显示不同类型的微调器。

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>

结果

验证结果。

Material Design Lite - 滑块

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的菜单。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-slider

将输入元素标识为 MDL 组件，并且是必需的。
2

mdl-js-slider

将基本 MDL 行为设置为输入元素，并且是必需的。

示例

以下示例将帮助您了解如何使用 mdl-slider 类来显示不同类型的滑块。

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>

结果

验证结果。

Material Design Lite - 复选框

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的复选框。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-checkbox

将标签标识为 MDL 组件，并且是标签元素所必需的。
2

mdl-js-checkbox

将基本 MDL 行为设置为标签，并且是标签元素所必需的。
3

mdl-checkbox__input

将基本 MDL 行为设置为复选框，并且是输入元素所必需的(复选框)。
4

mdl-checkbox__label

将基本 MDL 行为设置为标题，并且是跨度元素(标题)所必需的。
5

mdl-js-ripple-effect

设置涟漪点击效果，是可选的;位于标签元素上，而不是输入元素(复选框)上。

示例

以下示例将帮助您了解如何使用 mdl-slider 类来显示不同类型的复选框。

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>

结果

验证结果。

Material Design Lite - 单选按钮

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的单选按钮。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-radio

将标签标识为 MDL 组件，并且是标签元素所必需的。
2

mdl-js-radio

将基本 MDL 行为设置为标签，并且是标签元素所必需的。
3

mdl-radio__button

将基本 MDL 行为设置为 radio，并且是输入元素 (radio) 所必需的按钮)。
4

mdl-radio__label

将基本 MDL 行为设置为标题，并且是跨度元素 (caption) 所必需的。
5

mdl-js-ripple-effect

设置涟漪点击效果，是可选的;位于标签元素上，而不是输入元素 (单选按钮) 上。

示例

以下示例将帮助您了解如何使用 mdl-slider 类来显示不同类型的单选按钮。

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>

结果

验证结果。

Material Design Lite - 图标

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并将不同类型的复选框显示为图标。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-icon-toggle

将标签标识为 MDL 组件，并且是标签元素所必需的。
2

mdl-js-icon-toggle

将基本 MDL 行为设置为标签，并且是标签元素所必需的。
3

mdl-icon-toggle__input

将基本 MDL 行为设置为 icon-toggle并且是输入元素 (icon-toggle) 所必需的。
4

mdl-icon-toggle__label

将基本 MDL 行为设置为标题，并且是 i 元素 (icon) 所必需的。
5

mdl-js-ripple-effect

设置涟漪点击效果，是可选的;位于标签元素上，而不是输入元素 (icon-toggle) 上。

示例

以下示例展示了如何使用 mdl-icon-toggle 类将不同类型的复选框显示为图标。

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>

结果

验证结果。

Material Design Lite - 开关

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并将不同类型的复选框显示为开关。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-switch

将标签标识为 MDL 组件，并且是标签元素所必需的。
2

mdl-js-switch

将基本 MDL 行为设置为标签，并且是标签元素所必需的。
3

mdl-switch__input

将基本 MDL 行为设置为 switch，并且是输入元素所必需的(开关)。
4

mdl-switch__label

将基本 MDL 行为设置为标题，并且是输入元素(标题)所必需的。
5

mdl-js-ripple-effect

设置涟漪点击效果，是可选的;位于标签元素上，而不是输入元素(开关)上。

示例

以下示例将帮助您了解 mdl-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>

结果

验证结果。

Material Design Lite - DataTable

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并将表格显示为数据表。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-data-table

将表标识为 MDL 组件，并且是表元素所必需的。
2

mdl-js-data-table

将基本 MDL 行为设置为表，并且是表元素所必需的。
3

mdl-data-table--selectable

设置所有/单个可选行为(复选框)和是可选的;放在表格元素上。
4

mdl-data-table__cell--non-numeric

将文本格式设置为数据单元格，是可选的;出现在表头和表数据单元格上。
5

(none)

默认情况下，将数字格式设置为表头或数据单元格。

示例

以下示例将帮助您了解如何使用 mdl-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>

结果

验证结果。

Material Design Lite - 文本字段

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的文本输入。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-textfield

将容器标识为 MDL 组件，并且是"外部"div 元素所必需的。
2

mdl-js-textfield

将基本 MDL 行为设置为输入，并且是"外部"div 元素所必需的。
3

mdl-textfield__input

将元素标识为文本字段输入，并且是输入或文本区域元素。
4

mdl-textfield__label

将元素标识为文本字段标签，并且对于输入或文本区域元素的标签元素是必需的。
5

mdl-textfield--floating-label

应用浮动标签效果，是可选的;进入"外部" div 元素。
6

mdl-textfield__error

将 span 标识为 MDL 错误消息并且是可选的;进入具有模式的 MDL 输入元素的 span 元素。
7

mdl-textfield--expandable

将 div 标识为 MDL 可扩展文本字段容器;用于可扩展的输入字段，并且是"外部"div 元素所必需的。
8

mdl-button

将标签标识为 MDL 图标按钮;用于可扩展的输入字段，并且是"外部"div 的标签元素所必需的。
9

mdl-js-button

将基本行为设置为图标容器;用于可扩展的输入字段，并且是"外部"div 的标签元素所必需的。
10

mdl-button--icon

将标签标识为 MDL 图标容器;用于可扩展的输入字段，并且是"外部"div 的标签元素所必需的。
11

mdl-input__expandable-holder

将容器标识为 MDL 组件;用于可扩展的输入字段，在"内部"div 元素中是必需的。
12

is-invalid

在初始加载时将文本字段标识为无效，在 mdl-textfield 元素中是可选的。

示例

以下示例将帮助您了解如何使用 mdl-textfield 类来显示不同类型的文本字段。

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>

结果

验证结果。

Material Design Lite - 工具提示

MDL 提供了一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能并显示不同类型的工具提示。下表列出了可用的类及其效果。

Sr.No. 类名 &描述
1

mdl-tooltip

将容器标识为 MDL 工具提示，并且是工具提示容器元素中必需的。
2

mdl-tooltip--large

设置大字体效果，是可选的;位于工具提示容器元素上。

示例

以下示例将帮助您了解如何使用 mdl-tooltip 类来显示不同类型的工具提示。

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>

结果

验证结果。

❮ 上一节 下一节 ❯