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。
可擴充套件性 Material 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：

訪問 https://www.getmdl.io/started/index.html 下載最新版本。
然後，將下載的 **material.min.js** 檔案放在你的網站目錄中，例如 /js，並將 **material.min.css** 檔案放在 /css 目錄中。

示例

現在，你可以按如下方式在你的 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 類，用於將各種預定義的視覺和行為增強應用於容器。下表列出了可用的類及其效果。

序號	類名及描述
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 導航組。nav 元素需要此類。
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 類，用於將各種預定義的視覺和行為增強應用於網格。下表列出了可用的類及其效果。

序號	類名及描述
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（包括 1 和 12），預設為 4；“內層”div 元素可選。
6	mdl-cell--N-col-desktop 這有助於僅在桌面模式下將單元格的列大小設定為 N，N 為 1-12（包括 1 和 12）；“內層”div 元素可選。
7	mdl-cell--N-col-tablet 這有助於僅在平板模式下將單元格的列大小設定為 N，N 的取值為 1-8（包含 1 和 8）；對於“內部”div 元素可選。
8	mdl-cell--N-col-phone 這有助於僅在手機模式下將單元格的列大小設定為 N，N 的取值為 1-4（包含 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 類，可將各種預定義的視覺和行為增強應用於標籤頁。下表列出了可用的類及其效果。

序號	類名及描述
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 頁尾元件主要有兩種形式：大型頁尾和小型頁尾。大型頁尾包含比小型頁尾更復雜的內容。大型頁尾可以表示多個由水平線分隔的內容部分，而小型頁尾則呈現單個內容部分。頁尾通常包含資訊內容和可點選內容，例如連結。

MDL 提供各種 CSS 類，可將各種預定義的視覺和行為增強應用於大型頁尾和小型頁尾。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-mega-footer 將容器標識為 MDL 大型頁尾元件。頁尾元素必需。
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 頁尾類來設定頁尾的樣式。

大型頁尾

讓我們討論如何使用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 大型頁尾元件。
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 小型頁尾元件。
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 類，可將各種預定義的視覺和行為增強應用於徽章。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-badge 將元素標識為 MDL 徽章元件。span 或連結元素必需。
2	mdl-badge--no-background 為徽章應用開環效果，可選。
3	mdl-badge--overlap 使徽章與它的容器重疊，可選。
4	data-badge="value" 為用作屬性的徽章分配字串值；span 或連結上必需。

示例

以下示例將幫助您理解如何使用mdl-badge類向 span 和連結元素新增通知。

本示例中將使用以下 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 類，可將各種預定義的視覺和行為增強應用於按鈕。下表列出了可用的類及其效果。

序號	類名及描述
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 設定圖示（小的純圓形）顯示效果；這與 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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的卡片。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-card 將 div 元素標識為 MDL 卡片容器，“外層” div 必須使用此類。
2	mdl-card--border 為應用它的卡片部分新增邊框，用於“內層”div。
3	mdl-shadow--2dp 到 mdl-shadow--16dp 為卡片設定可變的陰影深度 (2, 3, 4, 6, 8 或 16)，可選，用於“外層”div；如果省略，則不顯示陰影。
4	mdl-card__title 將 div 標識為卡片標題容器，“內層”標題 div 必須使用此類。
5	mdl-card__title-text 為卡片標題設定合適的文字特性，標題 div 內的標題標籤 (H1 - H6) 必須使用此類。
6	mdl-card__subtitle-text 為卡片副標題設定文字特性，可選。它應該是標題元素的子元素。
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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的進度條。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-js-progress 為進度指示器設定基本的 MDL 行為，這是必需的類。
2	mdl-progress__indeterminate 為進度指示器設定動畫，這是一個可選類。

序號

類名及描述

mdl-js-progress

為進度指示器設定基本的 MDL 行為，這是必需的類。

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 - 載入動畫

MDL 提供一系列 CSS 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的載入動畫。下表列出了可用的類及其效果。

序號	類名及描述
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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的選單。下表列出了可用的類及其效果。

序號	類名及描述
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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的選單。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-slider 將輸入元素標識為 MDL 元件，這是必需的。
2	mdl-js-slider 為輸入元素設定基本的 MDL 行為，這是必需的。

序號

類名及描述

mdl-slider

將輸入元素標識為 MDL 元件，這是必需的。

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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的複選框。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-checkbox 將標籤標識為 MDL 元件，標籤元素必須使用此類。
2	mdl-js-checkbox 為標籤設定基本的 MDL 行為，標籤元素必須使用此類。
3	mdl-checkbox__input 為複選框設定基本的 MDL 行為，輸入元素 (複選框) 必須使用此類。
4	mdl-checkbox__label 為標題設定基本的 MDL 行為，span 元素 (標題) 必須使用此類。
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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的單選按鈕。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-radio 將標籤標識為 MDL 元件，標籤元素必須使用此類。
2	mdl-js-radio 為標籤設定基本的 MDL 行為，標籤元素必須使用此類。
3	mdl-radio__button 為單選按鈕設定基本的 MDL 行為，輸入元素 (單選按鈕) 必須使用此類。
4	mdl-radio__label 為標題設定基本的 MDL 行為，span 元素 (標題) 必須使用此類。
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 類，用於應用各種預定義的視覺和行為增強功能，並將不同型別的複選框顯示為圖示。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-icon-toggle 將標籤標識為 MDL 元件，標籤元素必須使用此類。
2	mdl-js-icon-toggle 為標籤設定基本的 MDL 行為，標籤元素必須使用此類。
3	mdl-icon-toggle__input 為圖示切換設定基本的 MDL 行為，輸入元素 (圖示切換) 必須使用此類。
4	mdl-icon-toggle__label 為標題設定基本的 MDL 行為，i 元素 (圖示) 必須使用此類。
5	mdl-js-ripple-effect 設定點選水波紋效果，可選；用於標籤元素，而不是輸入元素 (圖示切換)。

示例

下面的例子展示瞭如何使用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 類，用於應用各種預定義的視覺和行為增強功能，並將不同型別的複選框顯示為開關。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-switch 將標籤標識為 MDL 元件，標籤元素必須使用此類。
2	mdl-js-switch 為標籤設定基本的 MDL 行為，標籤元素必須使用此類。
3	mdl-switch__input 為開關設定基本的 MDL 行為，輸入元素 (開關) 必須使用此類。
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 - 資料表格

MDL 提供一系列 CSS 類，用於應用各種預定義的視覺和行為增強功能，並將表格顯示為資料表格。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-data-table 將表格標識為 MDL 元件，表格元素必須使用此類。
2	mdl-js-data-table 為表格設定基本的 MDL 行為，表格元素必須使用此類。
3	mdl-data-table--selectable 設定全部/單個可選行為 (複選框)，可選；用於表格元素。
4	mdl-data-table__cell--non-numeric 為資料單元格設定文字格式，可選；用於表格標題和表格資料單元格。
5	(無) 預設情況下，為標題或資料單元格設定數字格式。

示例

下面的例子將幫助你理解如何使用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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的文字輸入。下表列出了可用的類及其效果。

序號	類名及描述
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 類，用於應用各種預定義的視覺和行為增強功能，並顯示不同型別的工具提示。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-tooltip 標識容器為 MDL 提示框，是提示框容器元素的必填屬性。
2	mdl-tooltip--large 設定大字型效果，可選；位於提示框容器元素上。

序號

類名及描述

mdl-tooltip

標識容器為 MDL 提示框，是提示框容器元素的必填屬性。

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>

結果

驗證結果。

列印頁面

Material Design Lite 快速指南

Material Design Lite - 概述

什麼是 Material Design Lite？

響應式設計

標準 CSS

Material Design Lite - 環境搭建

本地安裝

示例

基於 CDN 的版本

示例

Material Design Lite - 佈局

固定抽屜

mdl_fixeddrawer.htm

結果

固定頁首

mdl_fixedheader.htm

結果

固定頁首和抽屜

mdl_fixedheader.htm

結果

滾動頁首

mdl_scrollingheader.htm

結果

收縮頁首

mdl_waterfallheader.htm

結果

具有可滾動標籤的固定頁首

mdl_scrollabletabheader.htm

結果

具有固定標籤的固定頁首

mdl_fixedtabheader.htm

結果

Material Design Lite - 網格

示例

mdl_grid.htm

結果

Material Design Lite - 標籤頁

示例

mdl_tabs.htm

結果

Material Design Lite - 頁尾

大型頁尾

mdl_megafooter.htm

結果

小型頁尾

mdl_minifooter.htm

結果

Material Design Lite - 徽章

示例

mdl_badges.htm

結果

Material Design Lite - 按鈕

示例

mdl_buttons.htm

結果

Material Design Lite - 卡片

示例

mdl_cards.htm

結果

Material Design Lite - 進度條

示例

mdl_progressbars.htm

結果

Material Design Lite - 載入動畫

示例

mdl_spinners.htm

結果

Material Design Lite - 選單

示例

mdl_menu.htm

結果

Material Design Lite - 滑塊

示例

mdl_sliders.htm

結果

Material Design Lite - 複選框

示例

mdl_checkboxes.htm

結果

Material Design Lite - 單選按鈕