Materialize 快速指南

Materialize - 概述

Materialize是一個使用CSS、JavaScript和HTML建立的UI元件庫。Materialize可重用的UI元件有助於構建具有吸引力、一致性和功能性的網頁和Web應用程式，同時遵循現代Web設計原則，例如瀏覽器可移植性、裝置獨立性和優雅降級。

其一些主要特點如下：

內建響應式設計。
標準CSS，佔用空間極小。
常見使用者介面控制元件（例如按鈕、複選框和文字欄位）的新版本，已調整為遵循Material Design理念。
增強的和專門的功能，例如卡片、標籤頁、導航欄、吐司提示等等。
免費使用，需要jQuery JavaScript庫才能正常執行。
跨瀏覽器相容，可用於建立可重用的Web元件。

響應式設計

Materialize具有內建的響應式設計，因此使用Materialize建立的網站會根據裝置尺寸重新設計自身。Materialize的類是按照網站能夠適應任何螢幕尺寸的方式建立的。

使用Materialize建立的網站與PC、平板電腦和移動裝置完全相容。

可擴充套件性

Materialize的設計非常簡潔和扁平化。它的設計考慮到了新增新的CSS規則比覆蓋現有的CSS規則更容易的事實。它支援陰影和醒目的顏色。顏色和色調在各個平臺和裝置上保持一致。

最重要的是，它是完全免費使用的。

Materialize - 環境搭建

如何使用Materialize？

有兩種方法可以使用Materialize：

本地安裝 - 你可以將materialize.min.css和materialize.min.js檔案下載到本地機器，並將其包含在你的HTML程式碼中。

基於CDN的版本 - 你可以直接從內容分發網路(CDN)將materialize.min.css和materialize.min.js檔案包含到你的HTML程式碼中。

本地安裝

訪問https://materializecss.com/getting-started.html下載最新版本。
然後，將下載的materialize.min.js檔案放在你的網站目錄中，例如/js，並將materialize.min.css檔案放在/css目錄中。

示例

如下所示，將css和js檔案包含在你的HTML檔案中。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它將產生以下結果。

基於CDN的版本

你可以直接從內容分發網路(CDN)將materialize.min.js和materialize.min.css檔案包含到你的HTML程式碼中。cdnjs.cloudflare.com提供最新版本的資源。

在本教程中，我們始終使用cdnjs.cloudflare.com CDN版本的庫。

示例

使用來自cdnjs.cloudflare.com CDN的materialize.min.css和materialize.min.js重寫上面的示例。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它將產生以下結果。

Materialize - 顏色

Materialize支援豐富的顏色類。這些顏色類是根據營銷、道路標誌和便利貼中使用的顏色設計的。

紅色 (red)
粉色 (pink)
紫色 (purple)
深紫色 (deep-purple)
靛青色 (indigo)
藍色 (blue)
淺藍色 (light-blue)
青色 (cyan)
藍綠色 (teal)
綠色 (green)
淺綠色 (light-green)
黃綠色 (lime)
黃色 (yellow)
琥珀色 (amber)
橙色 (orange)
深橙色 (deep-orange)
棕色 (brown)
灰色 (grey)
藍灰色 (blue-grey)
黑色 (black)
白色 (white)
透明 (transparent)

用法

以下是亮度/暗度類列表，可用於改變應用的顏色。

lighten-1
lighten-2
lighten-3
lighten-4
lighten-5
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4

示例

以下示例演示瞭如何使用上述類來渲染背景或更改文字的顏色。對於背景，直接新增這些類；對於文字，在顏色類後面新增“-text”字尾，並在亮度類前面新增“text-”字首。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class="card-panel">
         <div class="card-panel red lighten-2">
            <h1>Red Colored Theme</h1>
         </div>
         <span class="red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         <ul>
            <li class="red lighten-5"><p>Using red lighten-5</p></li>
            <li class="red lighten-4"><p>Using red lighten-4</p></li>
            <li class="red lighten-3"><p>Using red lighten-3</p></li>
            <li class="red lighten-2"><p>Using red lighten-2</p></li>
            <li class="red lighten-1"><p>Using red lighten-1</p></li>
            <li class="red"><p>Using red</p></li>
            <li class="red darken-1"><p>Using red darken-1</p></li>
            <li class="red darken-2"><p>Using red darken-2</p></li>
            <li class="red darken-3"><p>Using red darken-3</p></li>
            <li class="red darken-4"><p>Using red darken-4</p></li>
            <li class="red accent-1"><p>Using red accent-1</p></li>
            <li class="red accent-2"><p>Using red accent-2</p></li>
            <li class="red accent-3"><p>Using red accent-3</p></li>
            <li class="red accent-4"><p>Using red accent-4</p></li>
         </ul>
       </div>
    </body>
</html>

結果

驗證結果。

Materialize - 網格

Materialize提供了一個12列流體響應式網格。

它使用row和col樣式類分別定義行和列。

序號	類名和描述
1	row 指定一個無填充的容器，用於響應式列。此類是響應式類完全響應的必要條件。
2	col 指定一個帶有子類的列。

col有幾個子類，用於不同型別的螢幕。

小型螢幕裝置的列

以下是小型螢幕裝置（通常是智慧手機）的列級樣式列表。

序號	類名和描述
1	s1 定義12列中的1列，寬度為08.33%
2	s2 定義12列中的2列，寬度為16.66%。
3	s3 定義12列中的3列，寬度為25.00%。
4	s4 定義12列中的4列，寬度為33.33%。
s5 - s11
12	s12 定義12列中的12列，寬度為100%。小型手機的預設類。

中型螢幕裝置的列

以下是中型螢幕裝置（通常是平板電腦）的列級樣式列表。

序號	類名和描述
1	m1 定義12列中的1列，寬度為08.33%
2	m2 定義12列中的2列，寬度為16.66%。
3	m3 定義12列中的3列，寬度為25.00%。
4	m4 定義12列中的4列，寬度為33.33%。
m5 - m11
12	m12 定義12列中的12列，寬度為100%。中型手機的預設類。

大型螢幕裝置的列

以下是大型螢幕裝置（通常是筆記型電腦）的列級樣式列表。

序號	類名和描述
1	l1 定義12列中的1列，寬度為08.33%
2	l2 定義12列中的2列，寬度為16.66%。
3	l3 定義12列中的3列，寬度為25.00%。
4	l4 定義12列中的4列，寬度為33.33%。
l5 - l11
12	l12 定義12列中的12列，寬度為100%。大型螢幕裝置的預設類。

用法

每個子類根據裝置型別確定要使用的網格列數。請考慮以下HTML程式碼片段。

<div class="row">
   <div class="col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

如果HTML元素的class屬性中沒有提到子類，則裝置上使用的預設列數為12。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      </head>
      <body>
      <div class="teal">
            <h2>Mobile First Design Demo</h2>
            <p>Resize the window to see the effect!</p>
         </div>
         <hr/>
        <div class="row">
         <div class="col m1 grey center">1</div>
         <div class="col m1 center">2</div>
         <div class="col m1 grey center">3</div>
         <div class="col m1 center">4</div>
         <div class="col m1 grey center">5</div>
         <div class="col m1 center">6</div>
         <div class="col m1 center grey">7</div>
         <div class="col m1 center">8</div>
         <div class="col m1 center grey">9</div>
         <div class="col m1 center">10</div>
         <div class="col m1 center grey">11</div>
         <div class="col m1 center">12</div>
      </div>
      <div class="row">
         <div class="col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
         <div class="col s4 m8 l9 grey">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 輔助工具

Materialize有幾個實用程式類，對日常設計需求非常有用。

顏色實用程式類 - 例如，.red、.green、.grey等等
對齊實用程式類 - 例如，.valign-wrapper、.left-align、.right-align、.center-align、.left、.right
根據裝置尺寸隱藏內容的實用程式類 - 例如，.hide、.hide-on-small-only、.hide-on-med-only、.hide-on-med-and-down、.hide-on-med-and-up和.hide-on-large-only
格式化實用程式類 - 例如，truncate、hoverable

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example<!/title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"><!/script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Materialize Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class="red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class="green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.<!/p>
      </div>
      <h3>Alignment Utilities Demo</h3>
      <div class="card-panel valign-wrapper">
         <p class="valign">Vertically Aligned Text</p>
      </div>
      <div class="card-panel">
         <div><p class="left-align">Left Aligned Text</p></div>
         <div><p class="right-align">Right Aligned Text</p><!/div>
         <div><p class="center-align">Center Aligned Text</p></div>
      <div>
      <h3>Hide Utilities Demo</h3>
      <div class="hide">
         <p>Hidden on all devices</p>
      </div>
      <div class="hide-on-small-only">
         <p>Hidden on mobile devices</p>
      </div>
      <h3>Formatting Utilities Demo</h3>
      <div class="card-panel">
         <p class="truncate">The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.<!/p>
      </div>
      <div class="card-panel hoverable">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      <h3>Center Utility Demo</h3>
      <div class="card-panel center">
         <img src="html5-mini-logo.jpg" alt="html5">
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 媒體

Materialize有幾個類可以使影像和影片對不同的尺寸做出響應。

responsive-img - 它使影像能夠根據螢幕尺寸調整自身大小。
video-container - 用於包含嵌入影片的響應式容器。
responsive-video - 使HTML5影片具有響應性。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Materialize Media Examples</h2>
      <hr/>
      <h3>Images Demo</h3>
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="responsive-img">
      </div>
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img">
      </div>
      <h3>Responsive Embeded Video Demo</h3>
      <div class="video-container"> 
         <iframe width="540" height="200" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video-container">
         <video width="300" height="200" controls autoplay>
            <source src="https://tutorialspoint.tw/html5/foo.ogg" type="video/ogg" />
            <source src="https://tutorialspoint.tw/html5/foo.mp4" type="video/mp4" />
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 陰影

Materialize有幾個特殊的類可以將容器顯示為帶有陰影的紙質卡片。

序號	類名和描述
1	z-depth-0 刪除預設情況下具有z-depth的元素的陰影。
2	z-depth-1 為任何HTML內容的容器設定1畫素邊框陰影。新增z-depth 1。
3	z-depth-2 為任何HTML內容的容器設定2畫素邊框陰影。新增z-depth 2。
4	z-depth-3 為任何HTML內容的容器設定3畫素邊框陰影。新增z-depth 3。
5	z-depth-4 為任何HTML內容的容器設定4畫素邊框陰影。新增z-depth 4。
6	z-depth-5 為任何HTML內容的容器設定5畫素邊框陰影。新增z-depth 5。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   <style>
      div {
           width : 200px;
           height : 200px;
         }
   </style>
   </head>
   <body class="container">
      <h2>Materialize Shadow Examples</h2>
      <hr/>
         <div class="card-panel">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-1">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-2">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
         <div class="z-depth-3">
            <p><b>TODO:</b> Learn HTML5</p>
         </div>
            <div class="z-depth-4">
               <p><b>TODO:</b> Learn HTML5</p>
         </div>
            <div class="z-depth-5">
               <p><b>TODO:</b> Learn HTML5</p>
         </div>
   </body>
</html>

結果

驗證結果。

Materialize - 表格

Materialize可用於使用表格上的各種樣式顯示不同型別的表格。

序號	類名和描述
1	無 (None) 表示沒有邊框的基本表格。
2	條紋 (stripped) 顯示條紋表格。
3	帶邊框 (bordered) 繪製一個在行之間帶有邊框的表格。
4	高亮 (highlight) 繪製一個高亮顯示的表格。
5	居中 (centered) 繪製一個所有文字在表格中居中對齊的表格。
6	響應式表格 (responsive-table) 繪製一個響應式表格，如果螢幕太小而無法顯示內容，則顯示水平捲軸。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <style>
         div {
               width : 200px;
               height : 200px;
            }
      </style>
   </head>
   <body class="container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table>
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <h3>Stripped Table with borders</h3>
      <table class="striped bordered">
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <hr/>
      <h3>Centered Table</h3>
      <table class="centered">
      <thead>
         <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
      </thead>
      <tbody>
         <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
         <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
      </tbody>
      </table>
      <h3>Responsive table</h3>
      <table class="responsive-table">
      <thead>
         <tr>
            <th>Student</th><th>Class</th><th>Data #1</th>
            <th>Data #2</th><th>Data #3</th><th>Data #4</th>
            <th>Data #5</th><th>Data #6</th><th>Data #7</th>
            <th>Data #8</th><th>Data #9</th><th>Data #10</th>
         </tr>
      </thead>
      <tbody>
      <tr>
         <td>Mahesh Parashar</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr>
         <td>Rahul Sharma</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
            <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
      </tbody>
      </table>
   </body>
</html>

結果

驗證結果。

Materialize - 排版

Materialize使用Roboto 2.0作為標準字型。可以使用以下CSS樣式覆蓋它。

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

以下是標題、塊引用和自由流但響應式文字的示例。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Typography Demo</h2>
         <hr/>
         <h3>Headings</h3>
      <div class="card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h6>Heading 6</h6>
      </div>
         <h3>Block Quotes</h3>
      <div class="card-panel">
         <blockquote>
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </blockquote>
      </div>
         <h3>Responsive free-flow text</h3>
      <div class="card-panel">
         <p class="flow-text">
         The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </p>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 徽章

Materialize徽章元件是一個螢幕上的通知，可以是數字或圖示。它通常用於強調專案的數量。

序號	類名和描述
1	badge 將元素標識為MDL徽章元件。span元素需要此類。
2	new 向徽章元件新增“new”類，使其具有背景。

序號

類名和描述

badge

將元素標識為MDL徽章元件。span元素需要此類。

new

向徽章元件新增“new”類，使其具有背景。

以下是不同方式使用徽章的示例。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Badges Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h2>Badges Demo</h2>
         <hr/>
         <h3>Badges in List</h3>
      <div class="collection">
         <a href="#" class="collection-item">Inbox<span class="badge">12</span></a>
         <a href="#" class="collection-item">Unread<span class="new badge">4</span></a>
         <a href="#" class="collection-item">Sent</a>
         <a href="#" class="collection-item">Outbox<span class="badge">14</span></a>
      </div>
         <h3>Badges in dropdowns</h3>
      <ul id="dropdown" class="dropdown-content">
         <li><a href="#">Inbox<span class="badge">12</span></a></li>
         <li><a href="#!">Unread<span class="new badge">4</span></a></li>
         <li><a href="#">Sent</a></li>
            <li><a href="#">Outbox<span class="badge">14</span></a></li>
      </ul>
      <a class="btn dropdown-button" href="#" data-activates="dropdown">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
      <h3>Badges in Navigation</h3>
      <nav>
         <div class="nav-wrapper">
            <a href="" class="brand-logo">TutorialsPoint</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
               <li><a href="">Inbox</a></li>
               <li><a href="">Unread<span class="new badge">4</span></a></li>
               <li><a href="#">Sent</a></li>
                  <li><a href="#">Outbox</a></li>
            </ul>
         </div>
      </nav>
   </body>
</html>

結果

驗證結果。

Materialize - 按鈕

Materialize提供不同的CSS類，可以對按鈕應用各種預定義的視覺和行為增強。下表列出了可用的類及其效果。

序號	類名和描述
1	btn 將按鈕或錨點設定為Materialize按鈕，這是必需的。為按鈕設定凸起的顯示效果。
2	btn-floating 建立一個圓形按鈕。
3	btn-flat 為按鈕設定扁平顯示效果，這是預設效果。
4	btn-large 建立大型按鈕。
5	disabled 建立一個停用的按鈕。
6	type="submit" 將錨點或按鈕表示為主按鈕。
7	waves-effect 設定漣漪點選效果，可以與任何其他類組合使用。

示例

以下示例演示了mdl-button類的使用，以顯示不同型別的按鈕。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="card-panel">
         <h5>Raised Buttons</h5>
         <button class="btn waves-effect waves-teal">Add</button></td>
         <button class="btn waves-effect waves-teal"><i class="material-icons left">add</i>Add</button></td>
         <button class="btn waves-effect waves-teal"><i class="material-icons right">add</i>Add</button></td>
         <button class="btn waves-effect waves-teal disabled">Add</button></td>
      </div>
      <div class="card-panel">
         <h5>Flat Buttons</h5>
         <button class="btn-flat waves-effect waves-teal">Add</button></td>
         <button class="btn-flat waves-effect waves-teal disabled" ><i class="material-icons left">add</i>Add</button></td>
      </div>
      <div class="card-panel">
         <h5>Floating Buttons</h5>
         <a class="btn-floating waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating waves-effect waves-light red disabled" ><i class="material-icons">add</i></a>
      </div>
      <div class="card-panel">
         <h5>Primary Buttons</h5>
         <button class="btn waves-effect waves-light red" type="submit">Send<i class="material-icons right">send</i></button>
         <button class="btn waves-effect waves-light red disabled" type="submit" >Cancel<i class="material-icons right">cancel</i></button>
      </div>
      <div class="card-panel">
         <h5>Large Buttons</h5>
         <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating btn-large waves-effect waves-light red disabled"><i class="material-icons">add</i></a>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 麵包屑導航

Materialize提供各種CSS類，可以輕鬆建立漂亮的麵包屑導航。下表列出了可用的類及其效果。

序號	類名和描述
1	nav-wrapper 將nav元件設定為麵包屑/導航欄包裝器。
2	breadcrumb 將錨元素設定為麵包屑。最後一個錨元素處於活動狀態，其餘元素顯示為灰色。

序號

類名和描述

nav-wrapper

將nav元件設定為麵包屑/導航欄包裝器。

breadcrumb

將錨元素設定為麵包屑。最後一個錨元素處於活動狀態，其餘元素顯示為灰色。

示例

以下示例演示瞭如何使用麵包屑類來展示導航欄。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <nav>
         <div class="nav-wrapper">
            <div class="col s12">
               <a href="#" class="breadcrumb">Home</a>
               <a href="#" class="breadcrumb">Technology</a>
               <a href="#" class="breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>
</html>

結果

驗證結果。

Materialize - 卡片

Materialize 提供不同的 CSS 類，可以應用各種預定義的視覺和行為增強功能來顯示各種型別的卡片。下表列出了可用的類及其效果。

序號	類名和描述
1	card 將 div 元素標識為 Materialize 卡片容器。“外部”div 必須包含此類。
2	card-content 將 div 標識為卡片內容容器，並且“內部”div 必須包含此類。
3	card-title 將 div 標識為卡片標題容器，並且“內部”標題 div 必須包含此類。
4	card-action 將 div 標識為卡片操作容器，併為操作文字分配相應的文字特徵。“內部”操作 div 必須包含此類；內容直接位於 div 內，無需任何中間容器。
5	card-image 將 div 標識為卡片影像容器，並且“內部”div 必須包含此類。
6	card-reveal 將 div 標識為顯示文字容器。
7	activator 將 div 標識為顯示文字容器和作為顯示器的影像。用於顯示與影像相關的上下文資訊。
8	card-panel 將 div 標識為帶有陰影和填充的簡單卡片。
9	card-small 將 div 標識為小型卡片。高度 - 300px；
10	card-medium 將 div 標識為中型卡片。高度 - 400px；
11	card-larger 將 div 標識為大型卡片。高度 - 500px；

示例

以下示例展示瞭如何使用卡片類來展示各種型別的卡片。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <div class="col s12 m6">
            <div class="card blue-grey lighten-4">
               <div class="card-content">
                  <span class="card-title"><h3>Learn HTML5</h3></span>
                  <p>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.</p>
               </div>
               <div class="card-action">
                  <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
                  <a class="right blue-grey-text" href="https://tutorialspoint.tw">www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
               <div class="col s12 m6">
            <div class="card blue-grey lighten-4">
               <div class="card-image">
                  <img src="html5-mini-logo.jpg">
               </div>
               <div class="card-content">
                  <p>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.</p>
               </div>
               <div class="card-action">
                  <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
                  <a class="right blue-grey-text" href="https://tutorialspoint.tw">www.tutorialspoint.com</a>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col s12 m6">
         <div class="card blue-grey lighten-4">
            <div class="card-image waves-effect waves-block waves-light">
               <img class="activator" src="html5-mini-logo.jpg">
            </div>
            <div class="card-content activator">
               <p>Click the image to reveal more information.</p>
            </div>
            <div class="card-reveal">
               <span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span>
               <p>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.</p>
            </div>
            <div class="card-action">
               <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
               <a class="right blue-grey-text" href="https://tutorialspoint.tw">www.tutorialspoint.com</a>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col s12 m3">
         <div class="card-panel teal">
            <span class="white-text">Simple Card</span>
         </div>
      </div>
      <div class="col s12 m3">
         <div class="card small teal">
            <span class="white-text">Small Card</span>
         </div>
      </div>
         <div class="col s12 m3">
            <div class="card medium teal">
               <span class="white-text">Medium Card</span>
            </div>
         </div>
         <div class="col s12 m3">
            <div class="card large teal">
               <span class="white-text">Large Card</span>
            </div>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 晶片

Materialize 提供了一個名為Chip的特殊元件，可用於表示少量資訊。例如，聯絡人、標籤等。

序號	類名和描述
1	chip 將 div 容器設定為晶片。

示例

以下示例演示瞭如何使用 chip 類來展示建立各種型別的標籤。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="chip">
         <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5
      </div>
      <div class="chip">
         HTML 5<i class="material-icons">close</i>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 集合

Materialize 提供特殊的類來表示各種型別的集合，其中集合表示一組相關的專案資訊。

序號	類名和描述
1	collection 將 div 或 ul 容器設定為集合。
2	collection-item 將 a 或 li 專案設定為集合專案。
3	active 將 a 或 li 專案顯示為活動集合專案。
4	with-header 標記集合為具有標題。
5	collection-header 將 a 或 li 專案設定為集合標題。
6	avatar 將 a 或 li 專案設定為頭像專案。
7	dismissible 啟用集合專案被滑走。僅適用於觸控式螢幕裝置。

示例

以下示例演示瞭如何使用集合類來展示建立各種型別的集合。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h3>Simple Collection</h3><hr/>
      <ul class="collection">
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection of Links</h3><hr/>
      <div class="collection">
         <a href="#" class="collection-item">HTML 5</a>
         <a href="#!" class="collection-item active">JQuery</a>
         <a href="#!" class="collection-item">JavaScript</a>
         <a href="#!" class="collection-item">CSS</a>
      </div>
      <h3>Collection with Header</h3><hr/>
      <ul class="collection with-header">
         <li class="collection-header"><h3>Front End Technologies</h3></li>
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class="collection">
         <li class="collection-item"><div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
      </ul>
      <h3>Collection with Avatar</h3><hr/>
      <ul class="collection">
         <li class="collection-item avatar">
            <img alt="HTML5" src="html5-mini-logo.jpg" class="circle">
            <span class="title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
         <li class="collection-item avatar">
            <i class="material-icons circle green">insert_chart</i>
            <span class="title">HighCharts</span>
            <p></p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
      </ul>
      <h3>Collection with dismissible content</h3><hr/>
      <ul class="collection">
         <li class="collection-item dismissable">HTML 5</li>
         <li class="collection-item dismissable">JQuery</li>
         <li class="collection-item dismissable">JavaScript</li>
         <li class="collection-item dismissable">CSS</li>
      </ul>
   </body>
</html>

結果

驗證結果。

Materialize - 頁尾

Materialize 提供特殊的類來表示各種型別的集合，其中集合表示一組相關的專案資訊。

序號	類名和描述
1	page-footer 將 div 容器設定為頁尾。
2	footer-copyright 將 div 容器設定為頁尾版權容器。

序號

類名和描述

page-footer

將 div 容器設定為頁尾。

footer-copyright

將 div 容器設定為頁尾版權容器。

示例

以下示例演示瞭如何使用頁尾類來展示一個示例頁尾。

<html>
   <head>
      <title>The Materialize Collections Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <footer class="page-footer">
         <div class="row">
            <div class="col s12 m6 l6">
               <h5 class="white-text">Footer Content</h5>
            </div>
            <div class="col">
               <ul>
                  <li><a href="#" class="grey-text text-lighten-4 right">Help</a></li>
                  <li><a href="#" class="grey-text text-lighten-4 right">Privacy and Terms</a></li>
                  <li><a href="#" class="grey-text text-lighten-4 right">User Agreement</a></li>
               </ul>
            </div>
         </div>
         <div class="footer-copyright">
            <div class="container">
               © 2016 Copyright Information
               <a class="grey-text text-lighten-4 right" href="#!">Links</a>
            </div>
         </div>
      </footer>
   </body>
</html>

結果

驗證結果。

Materialize - 表單

Materialize 具有非常美觀且響應迅速的 CSS 用於表單設計。以下是使用的 CSS：

序號	類名和描述
1	input-field 將 div 容器設定為輸入欄位容器。必需。
2	validate 向輸入欄位新增驗證樣式。
3	active 顯示具有活動樣式的輸入。
4	materialize-textarea 用於設定文字區域的樣式。文字區域將自動調整到內部文字的大小。
5	filled-in 顯示帶有填充框樣式的複選框。

示例

以下示例演示瞭如何使用輸入類來展示一個示例表單。

<html>
   <head>
      <title>The Materialize Form Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <div class="input-field col s6">
                  <i class="material-icons prefix">account_circle</i>
                  <input placeholder="Username" value="Mahesh" id="name" type="text" class="active validate" required>
                  <label for="name">Username</label>
               </div>
               <div class="input-field col s6">
                  <label for="password">Password</label>
                  <input id="password" type="password" placeholder="Password" class="validate" required>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <input placeholder="Email" id="email" type="email" class="validate">
                  <label for="email">Email</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <i class="material-icons prefix">mode_edit</i>
                  <textarea id="address" class="materialize-textarea"></textarea>
                  <label for="address">Address</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <input placeholder="Comments (Disabled)" id="comments" type="text" disabled>
                  <label for="comments">Comments</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <p>
                     <input id="married" type="checkbox" checked="checked">
                     <label for="married">Married</label>
                  </p>
                  <p>
                     <input id="single" type="checkbox" class="filled-in" >
                     <label for="single">Single </label>
                  </p>
                  <p>
                     <input id="dontknow" type="checkbox" disabled="disabled">
                     <label for="dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <p>
                     <input id="male" type="radio" name="gender" value="male" checked>
                     <label for="male">Male</label>
                  </p>
                  <p>
                     <input id="female" type="radio" name="gender" value="female" checked>
                     <label for="female">Female  </label>
                  </p>
                  <p>
                     <input id="dontknow1" type="radio" name="gender" value="female" disabled>
                     <label for="dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

重要的輸入控制元件

Materialize 為多種型別的輸入控制元件提供 CSS。下表詳細說明了這些控制元件。

序號	輸入型別名稱和描述
1	Select 各種型別的選擇輸入
2	Switches 各種型別的開關
3	File 各種型別的檔案輸入
4	Range 各種型別的範圍輸入
5	日期選擇器日期選擇器
6	字元計數器字元計數器

Selects

示例

以下示例演示了不同型別的選擇選項。

<html>
   <head>
      <title>The Materialize Selects Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <script>
         $(document).ready(function() {
         $('select').material_select();
      });
      </script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Select</label>
               <select>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Materialize Multi Select</label>
               <select multiple>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Select with Optgroup</label>
               <select>
                  <optgroup label="Fruits">
                     <option value="1">Mango</option>
                     <option value="2">Orange</option>
                     <option value="3">Apple</option>
                  </optgroup>
                  <optgroup label="Vegs">
                     <option value="4">Brinjal</option>
                     <option value="5">Potato</option>
                     <option value="6">Tomato</option>
                  </optgroup>
               </select>
            </div>
            <div class="row">
               <label>Select with images</label>
               <select class="icons">
                  <option value="" disabled selected>Select Technology</option>
                  <option value="1" data-icon="html5-mini-logo.jpg" class="circle">HTML</option>
                  <option value="2">JavaScript</option>
                  <option value="3">CSS</option>
               </select>
            </div>
            <div class="row">
               <label>Browser default Select</label>
               <select class="browser-default">
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Disabled Materialize Select </label><label>Disabled Materialize Select</label>
               <select disabled>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Disabled Browser default Select </label>
               <select class="browser-default" disabled>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Switches

示例

以下示例演示了不同型別的開關。透過在其父 div 容器上應用類 switch，複選框將被設定為開關樣式。

<html>
   <head>
      <title>The Materialize Switches Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Switch</label>
                  <div class="switch"><label>Off   <input type="checkbox" checked><span class="lever"></span>On</label></div>
            </div>
            <div class="row">
               <label>Materialize Disabled Switch</label>
                  <div class="switch"><label>Off<input disabled type="checkbox"><span class="lever"></span>On</label></div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

File

示例

以下示例演示了不同型別的檔案上傳控制元件。

<html>
   <head>
      <title>The Materialize File Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize File Input</label>
               <div class="file-field input-field">
                  <div class="btn">
                     <span>Browse</span>
                     <input type="file">
                  </div>
                  <div class="file-path-wrapper">
                     <input class="file-path validate" type="text" placeholder="Upload file">
                  </div>
               </div>
            </div>
            <div class="row">
               <label>Materialize Multi File Input</label>
               <div class="file-field input-field">
                  <div class="btn">
                     <span>Browse</span>
                     <input type="file" multiple>
                  </div>
                  <div class="file-path-wrapper">
                     <input class="file-path validate" type="text" placeholder="Upload multiple files">
                  </div>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Range

示例

以下示例演示了 Materialize 範圍控制元件。

<html>
   <head>
      <title>The Materialize Range Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Range</label>
               <p class="range-field">
                  <input type="range" id="test" min="0" max="100" />
               </p>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

DatePicker

示例

以下示例演示了 Materialize DatePicker 控制元件。

<html>
   <head>
      <title>The Materialize Range Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize DatePicker</label>
               <input type="date" class="datepicker">
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

字元計數器

示例

以下示例演示了 Materialize 字元計數器控制元件。將長度設定為輸入文字或文字區域會啟用此控制元件。

<html>
   <head>
      <title>The Materialize DatePicker Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <div class="input-field col s6">
                  <input id="name" type="text" length="10">
                  <label for="name">Enter Name</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s6">
                  <textarea id="comments" class="materialize-textarea" length="120"></textarea>
                     <label for="comments">Comments</label>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 圖示

Materialize 支援以下流行的圖示庫：

Font Awesome 圖示
Google Material 圖示
Bootstrap 圖示

用法

要使用圖示，請將圖示名稱放在 HTML <i> 元素的類中。要控制圖示的大小，可以使用以下類：

序號	類名和描述
1	tiny 繪製非常小的圖示。1rem。
2	small 繪製小型圖示。2rem
3	medium 繪製中型圖示。4rem。
4	large 繪製大型圖示。6rem。

示例

<html>
   <head>
      <title>The Materialize Icons Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   <body class="container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class="fa fa-cloud tiny"></i>
      <i class="fa fa-cloud"></i>
      <i class="fa fa-cloud small"></i>
      <i class="fa fa-cloud medium"></i>
      <i class="fa fa-cloud large"></i>
      <h3>Google Material Design Icon Demo</h3>
      <i class="material-icons tiny">cloud</i>
      <i class="material-icons small">cloud</i>
      <i class="material-icons">cloud</i>
      <i class="material-icons medium">cloud</i>
      <i class="material-icons large">cloud</i>
      <h3>Bootstrap Icon Demo</h3>
      <i class="glyphicon glyphicon-cloud tiny"></i>
      <i class="glyphicon glyphicon-cloud"></i>
      <i class="glyphicon glyphicon-cloud small"></i>
      <i class="glyphicon glyphicon-cloud medium"></i>
      <i class="glyphicon glyphicon-cloud large"></i>
   </body>
</html>

結果

驗證結果。

Materialize - 導航欄

Materialize 提供各種 CSS 類，可以輕鬆建立漂亮的導航欄。下表列出了可用的類及其效果。

序號	類名和描述
1	nav-wrapper 將 nav 元件設定為導航欄/麵包屑包裝器。
2	brand-logo 將錨元素設定為主要徽標。
3	nav-mobile 將 ul 元素設定為導航欄。

序號

類名和描述

nav-wrapper

將 nav 元件設定為導航欄/麵包屑包裝器。

brand-logo

將錨元素設定為主要徽標。

nav-mobile

將 ul 元素設定為導航欄。

示例

以下示例演示瞭如何使用導航欄類來展示各種導航欄。

<html>
   <head>
      <title>The Materialize NavBar Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
         <script>
            $( document ).ready(function()){
            $(".dropdown-button").dropdown();
            });
         </script>
   </head>
   <body class="container">
      <div class="row" style="width:560px;">
         <div class="col s12 m12 l12">
            <h5>Right Aligned Nav Bar</h5>
               <nav>
                  <div class="nav-wrapper">
                     <a href="#" class="brand-logo">TutorialsPoint</a>
                     <ul id="nav-mobile" class="right hide-on-med-and-down">
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                     </ul>
                  </div>
               </nav>
            </div>
         </div>
         <div class="row" style="width:560px;">
            <div class="col s12 m12 l12">
               <h5>Left Aligned Nav Bar</h5>
                  <nav>
                     <div class="nav-wrapper">
                        <a href="#" class="brand-logo right">TutorialsPoint</a>
                        <ul id="nav-mobile" class="left  hide-on-med-and-down">
                           <li><a href="#">HTML5</a></li>
                           <li><a href="#">CSS</a></li>
                           <li><a href="#">JavaScript</a></li>
                        </ul>
                     </div>
                  </nav>
               </div>
            </div>
         <div class="row" style="width:560px;">
            <div class="col s12 m12 l12">
               <h5>Center Aligned Nav Bar</h5>
               <nav>
                  <div class="nav-wrapper">
                     <a href="#" class="brand-logo center">TutorialsPoint</a>
                     <ul id="nav-mobile" class="right hide-on-med-and-down">
                        <li><a href="#">Java</a></li>
                     </ul>
                  </div>
               </nav>
            </div>
         </div>
      <div class="row" style="width:560px;">
         <div class="col s12 m12 l12">
            <h5>Nav Bar with Active link</h5>
            <nav>
               <div class="nav-wrapper">
                  <a href="#" class="brand-logo right">TutorialsPoint</a>
                  <ul id="nav-mobile" class="left hide-on-med-and-down">
                     <li><a href="#">HTML5</a></li>
                     <li><a href="#">CSS</a></li>
                     <li class="active"><a href="#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      <div class="row" style="width:560px;">
         <div class="col s12 m12 l12">
            <h5>Nav Bar with dropdown menu</h5>
            <ul id="javaDropDown" class="dropdown-content">
               <li><a href="#!">JSF</a></li>
               <li><a href="#!">JSP</a></li>
               <li class="divider"></li>
               <li><a href="#!">Servlets</a></li>
            </ul>
            <nav>
               <div class="nav-wrapper">
                  <a href="#" class="brand-logo center">TutorialsPoint</a>
                  <ul id="nav-mobile" class="right hide-on-med-and-down">
                                       <!-- Dropdown Trigger -->
                     <li><a class="dropdown-button" href="#!" data-activates="javaDropDown">Java<i class="material-icons right">arrow_drop_down</i></a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
      <div class="row" style="width:560px;">
         <div class="col s12 m12 l12">
            <h5>Nav Bar with Links and Icons</h5>
            <nav>
               <div class="nav-wrapper">
                  <a href="#" class="brand-logo right">TutorialsPoint</a>
                  <ul id="nav-mobile" class="left hide-on-med-and-down">
                     <li><a href="#"><i class="material-icons left">search </i>HTML5</a></li>
                     <li><a href="#"><i class="material-icons right">view_module</i>CSS</a></li>
                     <li><a href="#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 分頁

Materialize 提供各種 CSS 類，可以輕鬆建立漂亮的分頁欄。下表列出了可用的類及其效果。

序號	類名和描述
1	pagination 將 ul 元素設定為分頁元件。

示例

以下示例演示瞭如何使用導航欄類來展示分頁欄。

<html>
   <head>
      <title>The Materialize Pagination Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row" style="width:560px;">
         <div class="col s12 m12 l12" >
            <h5>Materialize Pagination</h5>
               <ul class="pagination">
                  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left   </i></a></li>
                  <li class="active"><a href="#!">1</a></li>
                  <li class="waves-effect"><a href="#!">2</a></li>
                  <li class="waves-effect"><a href="#!">3</a></li>
                  <li class="waves-effect"><a href="#!">4</a></li> 
                  <li class="waves-effect"><a href="#!">5</a></li>
                  <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
               </ul>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 預載入器

Materialize 提供各種 CSS 類，可以應用各種預定義的視覺和行為增強功能來顯示各種型別的預載入器或進度條。下表列出了可用的類及其效果。

序號	類名和描述
1	progress 將元素標識為進度元件。div 元素必須包含此類。
2	determinate 將基本 Materialize 行為設定為進度指示器。
3	indeterminate 將動畫設定為進度指示器。

序號

類名和描述

progress

將元素標識為進度元件。div 元素必須包含此類。

determinate

將基本 Materialize 行為設定為進度指示器。

indeterminate

將動畫設定為進度指示器。

示例

以下是不同方式使用預載入器的示例。

<html>
   <head>
      <title>The Materialize Preloader Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h4>Default Preloader</h4>
      <div class="progress">
         <div class="determinate" style="width: 50%"></div>
      </div>
      <h4>Indeterminate Preloader</h4> 
         <div class="progress">
      <div class="indeterminate"></div>
    </div>
    <h4>Circular Preloader</h4>
      <div class="preloader-wrapper big active">
         <div class="spinner-layer spinner-blue-only">
         <div class="circle-clipper left">
               <div class="circle"></div>
            </div>
            <div class="gap-patch">
               <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
               <div class="circle"></div>
            </div>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 摺疊面板

Materialize 提供各種 CSS 類，可以應用各種預定義的視覺和行為增強功能來顯示各種型別的手風琴。下表列出了可用的類及其效果。

序號	類名和描述
1	collapsible 將元素標識為 materialize 可摺疊元件。ul 元素必須包含此類。
2	collapsible-header 將 div 設定為節標題。
3	collapsible-body 將 div 設定為節內容容器。
4	popout 建立一個彈出式可摺疊元件。
5	active 開啟一個節。
6	expandable 將可摺疊元件標記為可擴充套件的。
7	accordion 將可摺疊元件標記為手風琴。

以下是不同方式使用手風琴的示例。

示例

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h4>Simple Accordion</h4>
      <ul class="collapsible" data-collapsible="accordion">
         <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
               <div class="collapsible-body"><p>This is first section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
               <div class="collapsible-body"><p>This is second section.</p></div>
         </li>
         <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
               <div class="collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
      <h4>Popout Accordion</h4>
         <ul class="collapsible popout" data-collapsible="accordion">
            <li>
               <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
                  <div class="collapsible-body"><p>This is first section.</p></div>
            </li>
            <li>
               <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
                  <div class="collapsible-body"><p>This is second section.</p></div>
            </li>
            <li>
               <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
                  <div class="collapsible-body"><p>This is third section.</p></div>
            </li>
         </ul>
         <h4>Accordion with Preselected Section</h4>
         <ul class="collapsible" data-collapsible="accordion">
            <li>
               <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
                  <div class="collapsible-body"><p>This is first section.</p></div>
           </li>
           <li>
            <div class="collapsible-header active"><i class="material-icons">place</i>Second Section</div>
               <div class="collapsible-body"><p>This is second section.</p></div>
           </li>
            <li>
               <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
                  <div class="collapsible-body"><p>This is third section.</p></div>
            </li>
         </ul>
         <h4>Expandables</h4>
         <ul class="collapsible" data-collapsible="expandable">
            <li>
               <div class="collapsible-header"><i class="material-icons">filter_drama</i>First Section</div>
                  <div class="collapsible-body"><p>This is first section.</p></div>
            </li>
               <li>
                  <div class="collapsible-header"><i class="material-icons">place</i>Second Section</div>
                        <div class="collapsible-body"><p>This is second section.</p></div>
                  </li>
               <li>
                  <div class="collapsible-header"><i class="material-icons">whatshot</i>Third Section</div>
               <div class="collapsible-body"><p>This is third section.</p></div>
            </li>
         </ul>
      </body>
   </html>

結果

驗證結果。

Materialize - 對話方塊

Materialize 提供各種特殊方法來向用戶顯示不顯眼的警報。Materialize 使用術語 toast 來表示它們。以下是將對話方塊顯示為 toast 的語法。

Materialize.toast(message, displayLength, className, completeCallback);

其中，

message - 要顯示給使用者的郵件。
displayLength - 訊息持續時間，之後它將消失。
className - 要應用於 toast 的樣式類。例如，“rounded”。
completeCallback - toast 關閉後要呼叫的回撥方法。

對於工具提示，Materialize 提供以下 CSS 類。

序號	類名和描述
1	tooltipped 標識元件具有工具提示。
2	data-position 工具提示的位置；底部、頂部、左側或右側。
3	data-delay 設定工具提示的持續時間，之後它將消失。
4	data-tooltip 設定工具提示內容。

示例

以下示例演示瞭如何使用 toast 和工具提示。

<html>
   <head>
      <title>The Materialize Dialogs Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
         <script>
            function showToast(message, duration){
               Materialize.toast(message, duration);
            }
            function showToast1(message, duration){
               Materialize.toast('<i>'+ message + '</i>', duration);
            }
            function showToast2(message, duration){
               Materialize.toast(message, duration, 'rounded');
            }
            function showToast3(message, duration){
               Materialize.toast('Hello World!', duration, '', function toastCompleted(){
                     alert('Toast dismissed!');
            });
         }
      </script>
   </head>
   <body class="container">
      <h4>Toasts</h4>
      <a class="btn" onclick="showToast('Hello World!', 3000)">Normal Alert!</a>
      <a class="btn" onclick="showToast1('Hello World!', 3000)">Italic Alert!</a>
      <a class="btn" onclick="showToast2('Hello World!', 3000)">Rounded Alert!</a>
      <br/><br/>
      <a class="btn" onclick="showToast3('Hello World!', 3000)">Callback Alert!</a>
      <h4>Tooltips</h4>
      <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am in bottom!">Bottom</a>
      <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am in left!">Left</a>
      <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am in right!">Right</a>
      <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am in top!">Top</a>
   </body>
</html>

結果

驗證結果。

Materialize - 下拉選單

Materialize 提供下拉選單 CSS 類，可以將 ul 元素設定為下拉選單，並將 ul 元素的 id 新增到按鈕或錨元素的 data-activates 屬性中。下表列出了可用的類及其效果。

序號	類名和描述
1	dropdown-content 將 ul 標識為 materialize 下拉選單元件。ul 元素必須包含此類。
2	data-activates 下拉 ul 元素的 id。

序號

類名和描述

dropdown-content

將 ul 標識為 materialize 下拉選單元件。ul 元素必須包含此類。

data-activates

下拉 ul 元素的 id。

以下是使用下拉選單的示例。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Dropdowns Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h3>Drop Down Demo</h3>
      <ul id="dropdown" class="dropdown-content">
         <li><a href="#">Inbox<span class="badge">12</span></a></li>
         <li><a href="#!">Unread<span class="new badge">4</span></a></li>
         <li><a href="#">Sent</a></li>
         <li class="divider"></li> 
         <li><a href="#">Outbox<span class="badge">14</span></a></li>
      </ul>
      <a class="btn dropdown-button" href="#" data-activates="dropdown">Mail Box<i class="mdi-navigation-arrow-drop-down right"></i></a>
   </body>
</html>

結果

驗證結果。

Materialize - 標籤頁

Materialize 提供選項卡 CSS 類，可以將ul元素設定為選項卡。下表列出了可用的類及其效果。

序號	類名和描述
1	tabs 將 ul 標識為 materialize 選項卡元件。ul 元素必須包含此類。
2	active 使選項卡處於活動狀態。

序號

類名和描述

tabs

將 ul 標識為 materialize 選項卡元件。ul 元素必須包含此類。

active

使選項卡處於活動狀態。

示例

以下是使用選項卡的示例。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Tabs Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h3>Tabs Demo</h3>
         <div class="row">
            <div class="col s12">
            <ul class="tabs">
               <li class="tab col s3"><a href="#inbox">Inbox</a></li>
               <li class="tab col s3"><a class="active" href="#unread">Unread</a></li> 
               <li class="tab col s3 disabled"><a href="#outbox">Outbox (Disabled)</a></li>
               <li class="tab col s3"><a href="#sent">Sent</a></li>
            </ul>
         </div>
         <div id="inbox" class="col s12">Inbox</div>
          <div id="unread" class="col s12">Unread</div>
          <div id="outbox" class="col s12">Outbox (Disabled)</div>
         <div id="sent" class="col s12">Sent</div>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize - 水波效果

Materialize 使用 Waves（一個外部庫）來建立 Material Design 中概述的墨水效果。下表列出了可用的類及其效果。

序號	類名和描述
1	waves-effect 在控制元件上應用波紋效果。
2	waves-light 應用白色波紋效果。
3	waves-red 應用紅色波紋效果。
4	waves-green 應用綠色波紋效果。
5	waves-yellow 應用黃色波紋效果。
6	waves-orange 應用橙色波紋效果。
7	waves-purple 應用紫色波紋效果。
8	waves-teal 應用藍綠色波紋效果。

示例

以下是將波紋效果應用於按鈕的示例。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <h3>Waves Effects Demo</h3>
         <div class="collection waves-color-demo">
            <div class="collection-item">
            <code class=" language-markup">Default</code>
            <a href="#!" class="waves-effect btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-light</code>
            <a href="#!" class="waves-effect waves-light btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-red</code>
            <a href="#!" class="waves-effect waves-red btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-yellow</code>
            <a href="#!" class="waves-effect waves-yellow btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-orange</code>
            <a href="#!" class="waves-effect waves-orange btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-purple</code>
            <a href="#!" class="waves-effect waves-purple btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-green</code>
            <a href="#!" class="waves-effect waves-green btn secondary-content">Click Me!</a>
         </div>
         <div class="collection-item">
            <code class=" language-markup">waves-teal</code>
            <a href="#!" class="waves-effect waves-teal btn secondary-content">Click Me!</a>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面