簡介

Material Design Lite (MDL) 的徽章元件是一個螢幕上的通知元素。徽章由一個小圓圈組成，通常包含一個數字或其他字元，顯示在另一個物件附近。徽章既可以作為通知器，告知使用者與物件相關聯的其他項目，也可以作為指示器，顯示有多少個項目。

您可以使用徽章來巧妙地吸引使用者的注意力到他們可能不會注意到的項目，或者強調項目可能需要他們的注意。例如：

• 「新訊息」通知後面可能會接著一個包含未讀訊息數量的徽章。
• 「您的購物車中有未購買的商品」提醒可能會包含一個顯示購物車中商品數量的徽章。
• 「加入討論！」按鈕可能附帶一個徽章，指示目前參與討論的使用者人數。

徽章幾乎總是放在連結附近，以便使用者可以方便地存取徽章指示的其他資訊。但是，根據意圖，徽章本身可能是連結的一部分，也可能不是。

徽章是使用者介面中的一項新功能，它為使用者提供視覺線索，幫助他們發現其他相關內容。因此，它們的設計和使用是整體使用者體驗的重要因素。

要包含 MDL 徽章元件：

1. 編寫一個 <a>（錨點/連結）或 <span> 元素。包含任何所需的屬性和內容。

<a href="#">This link has a badge.</a>

2. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增到元素中。

<a href="#" class="mdl-badge">This link has a badge.</a>

3. 新增一個 data-badge 屬性和徽章的引號字串值。

<a href="#" class="mdl-badge" data-badge="5">This link has a badge.</a>

徽章元件即可使用。

注意：由於徽章元件的尺寸較小，data-badge 值通常應包含一到三個字元。超過三個字元不會造成錯誤，但某些字元可能會超出徽章範圍，因此難以或無法看到。 data-badge 屬性的值位於徽章的中心。

範例

連結內的徽章。

<a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>

靠近連結但未包含在連結內的徽章。

<a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>

連結內的徽章，字元過多，無法容納在徽章內。

<a href="#" class="mdl-badge" data-badge="123456789">
This badge has too many characters.</a>

連結內的徽章，沒有徽章背景顏色。

<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="123">
This badge has no background color.</a>

設定選項

MDL CSS 類別會將各種預先定義的視覺增強套用至徽章。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 的按鈕元件是標準 HTML <button> 元素的增強版本。按鈕由文字和/或圖像組成，清楚地傳達使用者點擊或觸摸它時將會發生的動作。MDL 按鈕元件提供各種類型的按鈕，並允許您新增顯示和點擊效果。

按鈕是大多數使用者介面中普遍存在的元素，無論網站的內容或功能為何。因此，它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱按鈕元件的 Material Design 規格頁面。

可用的按鈕顯示類型有*平面*（預設）、*凸起*、*fab*、*mini-fab* 和*圖示*；任何這些類型都可以是純色（淺灰色）或*彩色*，並且可以初始或以程式設計方式*停用*。 *fab*、*mini-fab* 和*圖示*按鈕類型通常使用小圖像作為其標題，而不是文字。

要包含 MDL 按鈕元件：

1. 編寫一個 <button> 元素。包含任何所需的屬性和值，例如 ID 或事件處理程式，並根據需要新增文字標題或圖像。

<button>Save</button>

2. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增到按鈕中。

<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>

按鈕元件即可使用。

範例

具有「凸起」效果的按鈕。

<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>

具有「fab」效果的按鈕。

<button class="mdl-button mdl-js-button mdl-button--fab">OK</button>

具有「圖示」和「彩色」效果的按鈕。

<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">?</button>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強套用至按鈕。下表列出了可用的類別及其效果。

注意： 提供所有可用按鈕類型的禁用版本，並使用標準 HTML 布林屬性 disabled 呼叫。 <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>凸起漣漪已禁用</button>。 或者，可以使用 mdl-button--disabled 類別來達到相同的樣式，但它不會禁用元素的功能。 這個屬性可以透過腳本以程式化的方式新增或移除。

簡介

Material Design Lite (MDL) 卡片元件是一個使用者介面元素，代表一張虛擬紙片，其中包含相關資料，例如照片、一些文字和連結，這些都與單一主題相關。

卡片是一種簡潔地顯示由不同類型物件組成的相關內容的便捷方式。它們也非常適合用於呈現大小或支援的操作可能差異很大的類似物件，例如帶有不同長度標題的照片。卡片具有固定的寬度和可變的高度，具體取決於其內容。

卡片是使用者介面中一個相當新的功能，允許使用者存取更複雜和詳細的資訊。它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱卡片元件的Material Design 規範頁面。

要包含 MDL 卡片元件

 1. 編寫一個 <div> 元素的程式碼；這是「外部」容器，旨在容納卡片的所有內容。

<div>
</div>

 2. 在 div 內，為每個所需的內容區塊編寫一個或多個「內部」div 的程式碼。包含標題、圖片、一些文字和操作列的卡片將包含四個「內部」div，它們都是同級的。

<div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</div>

 3. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增到「外部」div 和「內部」div（取決於它們的預期用途）。

<div class="mdl-card">
  <div class="mdl-card__title">
  ...
  </div>
  <div class="mdl-card__media">
  ...
  </div>
  <div class="mdl-card__supporting-text">
  ...
  </div>
  <div class="mdl-card__actions">
  ...
  </div>
</div>

 4. 使用標準 HTML 元素，以及選擇性地使用其他 MDL 類別，將內容新增到每個「內部」div 中，同樣取決於其預期用途。

<div class="mdl-card">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">title Text Goes Here</h2>
  </div>
  <div class="mdl-card__media">
    <img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
  </div>
  <div class="mdl-card__supporting-text">
    This text might describe the photo and provide further information, such as where and
    when it was taken.
  </div>
  <div class="mdl-card__actions">
    <a href="(URL or function)">Related Action</a>
  </div>
</div>

卡片元件已準備好使用。

範例

帶有標題、圖片、文字和操作的卡片（無陰影）。

<div class="mdl-card">
  <div class="mdl-card__title">
     <h2 class="mdl-card__title-text">Auckland Sky Tower<br>Auckland, New Zealand</h2>
  </div>
  <div class="mdl-card__media">
    <img src="skytower.jpg" width="173" height="157" border="0" alt=""
     style="padding:10px;">
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
  <div class="mdl-card__actions">
     <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
  </div>
</div>

帶有圖片、標題和文字的卡片（3 級陰影）

<div class="mdl-card mdl-shadow--4dp">
  <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
   alt="" style="padding:10px;">
  </div>
  <div class="mdl-card__supporting-text">
    Auckland Sky Tower, taken March 24th, 2014
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
</div>

設定選項

MDL CSS 類別將各種預定義的視覺和行為增強套用於卡片。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 的晶片元件是一個小型互動式元素。晶片通常用於聯絡人、文字、規則、圖示和照片。

包含 MDL 晶片元件

 1. 為晶片建立一個容器元素；通常使用 <span> 和 <div>，但任何容器元素都應該同樣有效。如果您需要互動性，請使用 <button>，或將 tabindex 屬性新增到您的容器中。

<span>
</span>

 2. 新增文字包裝器和 MDL 類別。

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
</span>

 3. 對於可刪除的晶片，請新增刪除圖示。這可以是 <a>、<button> 或非互動式標籤，例如 <span>。

<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

 4. 聯絡人晶片需要將 mdl-chip--contact 類別新增到容器中，以及另一個用於聯絡人圖示的容器。照片的圖示容器通常是 <img> 標籤，但其他類型的內容也可以使用一些額外的支援 CSS。

<span class="mdl-chip">
    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</span>

範例

一個基於按鈕的聯絡人晶片，其聯絡人圖片是一個帶有 background-image 的 <span>。

<style>
    .demo-chip .mdl-chip__contact {
        background-image: url("./path/to/image");
        background-size: cover;
    }
</style>

<button class="mdl-chip demo-chip">
    <span class="mdl-chip__contact">&nbsp;</span>
    <span class="mdl-chip__text">Chip Text</span>
    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>
</button>

CSS 類別

簡介

Material Design Lite (MDL) 的對話框元件允許驗證使用者操作、簡單的資料輸入和警示，以向使用者提供額外資訊。

基本用法

要使用對話框元件，您必須使用支援 dialog 元素 的瀏覽器。在撰寫本文時，只有 Chrome 和 Opera 原生支援。對於其他瀏覽器，您需要包含 dialog polyfill 或建立您自己的 polyfill。

在您獲得對話框支援後，建立一個 dialog 元素。使用 polyfill 時，該元素必須是 body 元素的子元素。在該容器內，新增一個帶有 mdl-dialog__content 類別的內容元素。新增您的內容，然後建立一個帶有 mdl-dialog__actions 類別的操作容器。最後，對於標記，請在此容器內新增按鈕以觸發對話框功能。

請記住，操作的順序會自動反轉。Material Design 要求主要（確認）操作顯示在最後。因此，您建立的第一個操作將顯示在操作列的最後。這允許更自然的編碼和 Tab 鍵順序，同時遵循規範。

請記得為您的操作項目新增事件處理程式。建立對話框標記後，將事件監聽器新增到頁面以觸發顯示對話框。

例如

  var button = document.querySelector('button');
  var dialog = document.querySelector('dialog');
  button.addEventListener('click', function() {
    dialog.showModal();
    /* Or dialog.show(); to show the dialog without a backdrop. */
  });

範例

簡單對話框

在 codepen 中查看此範例的實際效果。

<body>
  <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Allow data collection?</h4>
    <div class="mdl-dialog__content">
      <p>
        Allowing us to collect data will let us get you the information you want faster.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

具有全寬操作的對話框

在 codepen 中查看此範例的實際效果。

<body>
  <button type="button" class="mdl-button show-modal">Show Modal</button>
  <dialog class="mdl-dialog">
    <div class="mdl-dialog__content">
      <p>
        Allow this site to collect usage data to improve your experience?
      </p>
    </div>
    <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showModalButton = document.querySelector('.show-modal');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showModalButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

CSS 類別

區塊

元素

修飾符

簡介

Material Design Lite (MDL) 的版面配置元件是一種全面的頁面版面配置方法，它使用 MDL 開發原則，允許有效地使用 MDL 元件，並自動適應不同的瀏覽器、螢幕大小和裝置。

適當且易於存取的佈局是所有使用者介面的關鍵特性，無論網站的內容或功能為何。因此，頁面設計和呈現是整體使用者體驗的重要因素。詳情請參閱佈局元件的Material Design 規格頁面。

使用 MDL 佈局原則，藉由提供可重複使用的元件簡化了可縮放頁面的建立，並透過建立可辨識的視覺元素、遵循邏輯結構格線，以及在多個平台和螢幕尺寸上維持適當間距，來鼓勵跨環境的一致性。MDL 佈局非常強大且動態，允許在保持開發彈性和易用性的同時，在外觀和行為上保持高度一致性。

要包含基本的 MDL 佈局元件

1. 編寫一個 <div> 元素。這是包含整個佈局的「外部」div。

<div>
</div>

注意：佈局不能直接套用在 <body> 元素上。請務必建立一個巢狀的 <div> 元素。

2. 使用 class 屬性，將 MDL 類別（以空格分隔）新增至 div。

<div class="mdl-layout mdl-js-layout">
</div>

3. 在 div 內，編寫一個 <header> 元素。這包含在大螢幕上顯示的帶有導覽連結的標題列，以及用於開啟較小螢幕導覽抽屜選單的圖示。使用 class 屬性將 MDL 類別新增至標題。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
  </header>
</div>

4. 在標題內，新增一個 <div> 以產生選單圖示，並包含指定的 MDL 類別。該 div 本身沒有內容。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
  </header>
</div>

5. 仍在標題內，新增另一個 <div> 以容納標題列的內容，並包含指定的 MDL 類別。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
    </div>
  </header>
</div>

6. 在標題列 div 內，新增一個包含佈局標題的 span，並包含指定的 MDL 類別。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
    </div>
  </header>
</div>

7. 在 span 之後，新增一個 <div> 將標題的導覽連結向右對齊，並包含指定的 MDL 類別。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
</div>

8. 在間隔 div 之後，新增一個 <nav> 元素以包含標題的導覽連結，並包含指定的 MDL 類別。在 nav 內，為每個標題連結新增一個錨點 <a> 元素，並包含指定的 MDL 類別。這樣就完成了佈局的標題。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
</div>

9. 在標題之後，新增一個 <div> 元素以容納滑出式抽屜的內容，並新增指定的 MDL 類別。抽屜會自動顯示在較小的螢幕上，並且可以在任何螢幕尺寸上使用選單圖示開啟。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
  </div>
</div>

10. 在抽屜 div 內，新增一個包含佈局標題的 span（這應該與步驟 5 中的標題相符），並包含指定的 MDL 類別。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
  </div>
</div>

11. 在 span 之後，新增一個 <nav> 元素以包含抽屜的導覽連結，以及每個抽屜連結的一個錨點 <a> 元素（這些應該與步驟 7 中的連結相符），並包含指定的 MDL 類別。這樣就完成了佈局的抽屜。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Nav link 1</a>
      <a class="mdl-navigation__link" href="#">Nav link 2</a>
      <a class="mdl-navigation__link" href="#">Nav link 3</a>
    </nav>
  </div>
</div>

12. 最後，在抽屜 div 之後，新增一個 <main> 元素以容納佈局的主要內容，並包含指定的 MDL 類別。在該元素內，新增您想要的內容。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Simple Layout</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Nav link 1</a>
        <a class="mdl-navigation__link" href="#">Nav link 2</a>
        <a class="mdl-navigation__link" href="#">Nav link 3</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Simple Layout</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Nav link 1</a>
      <a class="mdl-navigation__link" href="#">Nav link 2</a>
      <a class="mdl-navigation__link" href="#">Nav link 3</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <p>Content</p>
    <p>Goes</p>
    <p>Here</p>
  </main>
</div>

佈局元件已準備好使用。

範例

適用於較大螢幕的固定標題和適用於較小螢幕的可摺疊抽屜的佈局。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Material Design Lite</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Hello</a>
        <a class="mdl-navigation__link" href="#">World.</a>
        <a class="mdl-navigation__link" href="#">How</a>
        <a class="mdl-navigation__link" href="#">Are</a>
        <a class="mdl-navigation__link" href="#">You?</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

具有非固定標題且隨內容捲動的相同佈局。

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--scroll">
    <img class="mdl-layout-icon"></img>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Material Design Lite</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Hello</a>
        <a class="mdl-navigation__link" href="#">World.</a>
        <a class="mdl-navigation__link" href="#">How</a>
        <a class="mdl-navigation__link" href="#">Are</a>
        <a class="mdl-navigation__link" href="#">You?</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

具有固定抽屜的佈局，可在較大螢幕上作為側邊欄導覽。抽屜會摺疊，並且選單圖示會顯示在較小的螢幕上。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Fixed drawer layout demo</span>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

具有固定抽屜但沒有標題的佈局。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Material Design Lite</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Hello</a>
      <a class="mdl-navigation__link" href="#">World.</a>
      <a class="mdl-navigation__link" href="#">How</a>
      <a class="mdl-navigation__link" href="#">Are</a>
      <a class="mdl-navigation__link" href="#">You?</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div>Content</div>
  </main>
</div>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能套用至佈局。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 網格元件是一種簡化的多螢幕尺寸內容排版方法。它減少了在各種顯示條件下正確顯示內容區塊所需的 üblich 編碼負擔。

MDL 網格由一個容器元素定義和包圍。網格在桌面螢幕尺寸中有 12 個欄，在平板電腦尺寸中有 8 個欄，在手機尺寸中有 4 個欄，每個尺寸都有預先定義的邊距和間隔。儲存格按順序排列在一列中，按照它們定義的順序排列，但有一些例外

• 如果儲存格不適合其中一個螢幕尺寸的列，它會流入下一行。
• 如果儲存格的指定欄大小等於或大於目前螢幕尺寸的欄數，它會佔據整列。

您可以設定最大網格寬度，之後網格會在兩側保持居中並帶有填補，方法是設定其 max-width CSS 屬性。

網格在大多数使用者介面中是一個相當新且非標準化的功能，它為使用者提供了一種以有組織的方式檢視內容的方式，否則可能難以理解或記住。它們的設計和使用是整體使用者體驗的重要因素。

要包含 MDL 網格元件

1. 編寫一個 <div> 元素；這是「外部」容器，旨在容納所有網格的儲存格。根據需要設定 div 的樣式（顏色、字型大小等）。

<div>
</div>

2. 使用 class 屬性將 mdl-grid MDL 類別新增至 div。

<div class="mdl-grid">
</div>

3. 對於每個儲存格，編寫一個「內部」div，包括要顯示的文字。

<div class="mdl-grid">
  <div>Content</div>
  <div>goes</div>
  <div>here</div>
</div>

4. 使用 class 屬性將 mdl-cell 類別和 mdl-cell--COLUMN-col 類別（其中 COLUMN 指定儲存格的欄大小）新增至「內部」div。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">Content</div>
  <div class="mdl-cell mdl-cell--4-col">goes</div>
  <div class="mdl-cell mdl-cell--4-col">here</div>
</div>

5. 選擇性地新增一個 mdl-cell--COLUMN-col-DEVICE 類別，其中 COLUMN 指定儲存格在特定裝置上的欄大小，DEVICE 指定裝置類型。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">Content</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">goes</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet">here</div>
</div>

網格元件已準備好使用。

範例

具有五個欄大小為 1 的儲存格的網格。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
  <div class="mdl-cell mdl-cell--1-col">CS 1</div>
</div>

具有三個儲存格的網格，一個欄大小為 6，一個欄大小為 4，一個欄大小為 2。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">CS 6</div>
  <div class="mdl-cell mdl-cell--4-col">CS 4</div>
  <div class="mdl-cell mdl-cell--2-col">CS 2</div>
</div>

具有三個欄大小為 6 的儲存格的網格，在平板電腦裝置上將顯示為欄大小為 8。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
</div>

具有四個欄大小為 2 的儲存格的網格，在手機裝置上將顯示為欄大小為 4。

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
</div>

設定選項

MDL CSS 類別會將各種預先定義的視覺增強功能和行為效果套用至網格。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 的標籤元件是一種使用者介面元素，允許不同的內容區塊以互斥的方式共用相同的螢幕空間。標籤總是成組出現（兩個或更多），它們讓您可以輕鬆瀏覽和切換應用程式的不同視圖或功能面向，或個別瀏覽分類的資料集。標籤作為其各自內容的「標題」；作用中的標籤（目前顯示其內容的標籤）在視覺上總是與其他標籤區分開來，以便使用者知道目前內容屬於哪個標題。

標籤是使用者介面中既定但不標準化的功能，允許使用者檢視不同但通常相關的內容區塊（通常稱為面板）。標籤節省螢幕空間，並提供直觀且合乎邏輯的資料存取方式，同時減少導覽和相關的使用者混淆。它們的設計和使用是整體使用者體驗的重要因素。詳情請參閱標籤元件的Material Design 規範頁面。

要包含一組 MDL 標籤元件

 1. 編寫一個 <div> 元素；這是「外部」div，旨在包含所有標籤及其內容。

<div>
</div>

 2. 在「外部」div 內，為標籤本身編寫一個「內部」div，並為每個標籤的內容編寫一個「內部」div，所有這些都是同級的。也就是說，對於三個內容標籤，您需要編寫四個「內部」div。

<div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</div>

 3. 在第一個「內部」div（標籤）內，為每個標籤編寫一個錨點 <a>（連結）標籤。包含 href 屬性，其值與標籤的 id 屬性值匹配，以及一些簡短的連結文字。在剩餘的「內部」div（內容）上，編寫 id 屬性，其值與連結的 href 匹配。

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
  ...
  </div>
  <div id="tab2">
  ...
  </div>
  <div id="tab3">
  ...
  </div>
</div>

 4. 在剩餘的「內部」div 內，編寫您要在每個面板中顯示的內容；使用標準 HTML 標籤根據需要構造內容。

<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
    <p>First tab's content.</p>
  </div>
  <div id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

 5. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增到「外部」和「內部」div；請務必在您想要預設顯示的標籤上包含 is-active 類別。

<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
    <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>

標籤元件已準備好使用。

範例

三個標籤，標籤連結上有漣漪效果。

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#about-panel" class="mdl-tabs__tab is-active">About the Beatles</a>
    <a href="#members-panel" class="mdl-tabs__tab">Members</a>
    <a href="#albums-panel" class="mdl-tabs__tab">Discography</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="about-panel">
    <p><b>The Beatles</b> were a four-piece musical group from Liverpool, England.
    Formed in 1960, their career spanned just over a decade, yet they are widely
    regarded as the most influential band in history.</p>
    <p>Their songs are among the best-loved music of all time. It is said that every
    minute of every day, a radio station somewhere is playing a Beatles song.</p>
  </div>
  <div class="mdl-tabs__panel" id="members-panel">
    <p>The Beatles' members were:</p>
    <ul>
      <li>John Lennon (1940-1980)</li>
      <li>Paul McCartney (1942-)</li>
      <li>George Harrison (1943-2001)</li>
      <li>Ringo Starr (1940-)</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="albums-panel">
    <p>The Beatles' original UK LPs, in order of release:</p>
    <ol>
      <li>Please Please Me (1963)</li>
      <li>With the Beatles (1963)</li>
      <li>A Hard Day's Night (1964)</li>
      <li>Beatles for Sale (1964)</li>
      <li>Help! (1965)</li>
      <li>Rubber Soul (1965)</li>
      <li>Revolver (1966)</li>
      <li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
      <li>The Beatles ("The White Album", 1968)</li>
      <li>Yellow Submarine (1969)</li>
      <li>Abbey Road (1969)</li>
      <li>Let It Be (1970)</li>
    </ol>
  </div>
</div>

設定選項

MDL CSS 類別將各種預定義的視覺和行為增強功能應用於標籤。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 的頁尾元件是一個綜合性容器，旨在以視覺上吸引人且邏輯上直觀的區域呈現大量相關內容。雖然它被稱為「頁尾」，但它可以放置在裝置螢幕上的任何適當位置，在其他內容之前或之後。

MDL 頁尾元件有兩種基本形式：大型頁尾和小型頁尾。顧名思義，大型頁尾包含比小型頁尾更多（且更複雜）的內容。大型頁尾會顯示由水平規則分隔的多個內容區段，而小型頁尾則顯示單個內容區段。兩種頁尾形式都有其內部結構，包括必需和可選元素，通常包含資訊性和可點擊的內容，例如連結。

由此元件表示的頁尾是使用者介面中相當新的功能，允許使用者以一致且有條理的方式檢視離散的內容區塊。它們的設計和使用是整體使用者體驗的重要因素。

要包含 MDL 大型頁尾元件

 1a. 編寫一個 <footer> 元素。在頁尾內，為每個內容區段包含一個 <div> 元素，通常是三個：頂部、中間和底部。

<footer>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</footer>

 1b. 使用 class 屬性將適當的 MDL 類別新增到頁尾和 div。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
  ...
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 2a. 在頂部區段 div 內，為左側和右側內容區段編寫兩個同級的「內部」div。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div>
    ...
    </div>
    <div>
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 2b. 使用 class 屬性將適當的 MDL 類別新增到兩個「內部」左側和右側 div。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
  ...
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 3a. 在中間區段 div 內，為下拉式內容區段編寫一個或多個同級的「內部」div。也就是說，對於兩個下拉式區段，您需要編寫兩個 div。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div>
    ...
    </div>
    <div>
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 3b. 使用 class 屬性將適當的 MDL 類別新增到兩個「內部」下拉式 div。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
  ...
  </div>
</footer>

 4a. 在底部區段 div 內，為區段標題編寫一個「內部」div，並為底部區段連結編寫一個同級的無序清單。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div>
      ...
    </div>
    <ul>
      ...
    </ul>
  </div>
</footer>

 4b. 使用 class 屬性將適當的 MDL 類別新增到「內部」div 標題和清單。

<footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
    ...
    </div>
    <div class="mdl-mega-footer__right-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
    <div class="mdl-mega-footer__drop-down-section">
    ...
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
    </div>
    <ul class="mdl-mega-footer__link-list">
      ...
    </ul>
  </div>
</footer>

 5. 將內容新增到頁尾的頂部（左側和右側）、中間（下拉式）和底部（文字和連結）區段；使用 class 屬性包含任何適當的 MDL 類別。

<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"></button>
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></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">Drop-down 1 Heading</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="">Link A</a></li>
        <li><a href="">Link B</a></li>
        <li><a href="">Link C</a></li>
        <li><a href="">Link D</a></li>
      </ul>
    </div>
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="">Link A</a></li>
        <li><a href="">Link B</a></li>
        <li><a href="">Link C</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
    Mega-Footer Bottom Section Heading
    </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>

大型頁尾元件已準備好使用。

範例

一個大型頁尾元件，包含三個區段和中間區段中的兩個下拉式區段。

<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"></button>
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
    </div>
    <div class="mdl-mega-footer__right-section">
      <a href="#">Introduction</a>
      <a href="#">App Status Dashboard</a>
      <a href="#">Terms of Service</a>
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Learning and Support</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Resource Center</a></li>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Learn with Google</a></li>
        <li><a href="#">Small Business Community</a></li>
        <li><a href="#">Think Insights</a></li>
      </ul>
    </div>
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Just for Developers</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Google Developers</a></li>
        <li><a href="#">AdWords API</a></li>
        <li><a href="#">AdWords Scipts</a></li>
        <li><a href="#">AdWords Remarketing Tag</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
      More Information
    </div>
    <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy and Terms</a></li>
    </ul>
  </div>
</footer>

要包含 MDL 小型頁尾元件

 1a. 編寫一個 <footer> 元素。在頁尾內，編寫兩個 <div> 元素，一個用於左側區段，另一個用於右側區段。

<footer>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</footer>

 1b. 使用 class 屬性將適當的 MDL 類別新增到頁尾和 div。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
  ...
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 2a. 在左側區段 div 內，為區段標題編寫一個「內部」div，並為左側區段連結編寫一個同級的無序清單。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div>
      ...
    </div>
    <ul>
      ...
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 2b. 使用 class 屬性將適當的 MDL 類別新增到「內部」div 和清單。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      ...
    </div>
    <ul class="mdl-mini-footer__link-list">
      ...
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
  ...
  </div>
</footer>

 3. 將內容新增到頁尾的左側（文字和連結）和右側（文字或裝飾）區段；使用 class 屬性包含任何適當的 MDL 類別。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      Mini-footer Heading
    </div>
    <ul class="mdl-mini-footer__link-list">
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
  </div>
</footer>

小型頁尾元件已準備好使用。

範例

一個包含左側和右側區段的小型頁尾。

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      More 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"></button>
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
  </div>
</footer>

設定選項

MDL CSS 類別會將各種預定義的視覺增強功能應用於頁尾。下表列出了可用的類別及其效果。

簡介

列表以垂直方式將多個項目呈現為單個連續元素。參考Material Design 規範以了解更多關於內容選項的資訊。

要包含 MDL 列表組件

使用基本項目建立列表。

 1. 使用 mdl-list 類別編寫一個 <ul> 元素；這是「外部」容器，旨在容納列表的所有內容。

<ul class='mdl-list'>
</ul>

 2. 使用 mdl-list__item 類別編寫所需數量的 <li> 元素；這是旨在容納所有項目內容的元素。

<ul class='mdl-list'>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
</ul>

 3. 將您的內容添加為 <li> 的子項，並使用適當的內容類型修改類別，例如。

<ul class='mdl-list'>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
</ul>

設定選項

MDL CSS 類別會對列表套用各種預先定義的視覺增強功能。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 進度組件是網頁或應用程式中背景活動的視覺指示器。進度指示器通常由一個水平條組成，其中包含一些傳達運動感的動畫。雖然某些進度裝置指示大約或特定的完成百分比，但 MDL 進度組件僅傳達活動正在進行且尚未完成的事實。

進度指示器是使用者介面中已建立但非標準化的功能，可為使用者提供應用程式狀態的視覺線索。因此，它們的設計和使用是整體使用者體驗中的重要因素。有關詳細資訊，請參閱進度組件的Material Design 規範頁面。

要包含 MDL 進度組件

 1. 編寫一個 <div> 元素。包含任何所需的屬性和值，例如 id 或寬度，通常使用外部 CSS 完成，而不是如圖所示的內聯 style 屬性。

<div id="prog1" style="width:250px"></div>

 2. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別添加到 div。

<div id="prog1" style="width:250px" class="mdl-js-progress"></div>

進度組件已準備好使用。

範例

靜態（非動畫）進度指示器。

<div id="progstatic" style="width:250px" class="mdl-js-progress"></div>

活動（動畫）進度指示器。

<div id="progactive" style="width:200px" class="mdl-js-progress
 mdl-progress--indeterminate"></div>

設定選項

MDL CSS 類別會對進度指示器套用各種預先定義的視覺和行為增強功能。下表列出了可用的類別及其效果。

注意：程式碼庫中確實存在 mdl-progress__intermediate。由於名稱與 BEM 不一致，因此已棄用。它將在 2.0 中移除。

簡介

Material Design Lite (MDL) 旋轉器組件是經典「等待游標」（在硬體和軟體版本之間顯著不同）的增強替代品，表示正在進行的過程，其結果尚未可用。旋轉器由一個開放的圓圈組成，它在順時針方向動畫時會改變顏色，並清楚地傳達已開始但尚未完成的過程。

旋轉器本身不執行任何動作，無論是通過其顯示還是當使用者點擊或觸摸它時，並且不指示過程的特定進度或完成程度。MDL 旋轉器組件提供各種類型的旋轉器，並允許您添加顯示效果。

旋轉器是大多數使用者介面中的一個相當新的功能，可為使用者提供關於正在進行的活動的一致視覺線索，而不管硬體裝置、作業系統或瀏覽器環境如何。它們的設計和使用是整體使用者體驗中的重要因素。

要包含 MDL 旋轉器組件

 1. 編寫一個元素，例如 <div>、<p> 或 <span>，以包含旋轉器；該元素本身不應有任何內容。

<div></div>

 2. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別添加到容器。

<div class="mdl-spinner mdl-js-spinner is-active"></div>

旋轉器組件已準備好使用。

範例

div 中的預設旋轉器。

<div class="mdl-spinner mdl-js-spinner is-active"></div>

段落中的單色旋轉器。

<p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>

設定選項

MDL CSS 類別會對旋轉器套用各種預先定義的視覺增強功能。下表列出了可用的類別及其效果。

注意：旋轉器沒有特定的 *禁用* 版本； is-active 類別的存在或不存在決定旋轉器是否可見。例如，此旋轉器處於非活動狀態且不可見： <div class="mdl-spinner mdl-js-spinner"></div> 可以透過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) 選單組件是一種使用者介面元素，允許使用者從多個選項中選擇一個。選擇通常會導致動作啟動、設定變更或其他可觀察到的效果。選單選項始終以兩個或多個一組顯示，並且可以根據需要以程式設計方式啟用或停用選項。當要求使用者在一系列選項中進行選擇時，會出現選單，通常在做出選擇後就會關閉。

選單是使用者介面中已建立但非標準化的功能，允許使用者做出指導軟體活動、進度或特性的選擇。它們的設計和使用是整體使用者體驗中的重要因素。有關詳細資訊，請參閱選單組件的Material Design 規範頁面。

要包含 MDL 選單組件

注意：選單需要一個非靜態定位的父元素。如果選單位於靜態定位的節點內，定位選項可能無法正常工作。

1. 編寫一個 <button> 元素；這是用於顯示和隱藏選單選項的可點擊切換按鈕。加入一個 id 屬性，其值將與下一步中編寫的無序列表的 for（或 data-mdl-for）屬性相匹配。在按鈕內，編寫一個 <i> 或 <span> 元素來包含您選擇的圖示。(1)

<button id="menu1">
  <i></i>
</button>

2. 編寫一個 <ul> 無序列表元素；這是包含選項的容器。加入一個 for 屬性，其值與按鈕元素的 id 屬性相匹配。

<ul for="menu1">
</ul>

3. 在無序列表內，為每個選項編寫一個 <li> 元素。包含任何所需的屬性和值，例如 id 或事件處理程式，並根據需要添加文字標題。

<ul for="menu1">
  <li>Continue</li>
  <li>Stop</li>
  <li>Pause</li>
</ul>

4. 使用 class 屬性，將一個或多個 MDL 類別（以空格分隔）添加到按鈕和 span 元素。

<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>

5. 使用 class 屬性，將一個或多個 MDL 類別（以空格分隔）添加到無序列表和列表項。

<ul class="mdl-menu mdl-js-menu" for="menu1">
  <li class="mdl-menu__item">Continue</li>
  <li class="mdl-menu__item">Stop</li>
  <li class="mdl-menu__item">Pause</li>
</ul>

選單組件已準備就緒。

範例

具有三個選項的選單。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item">Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

具有三個選項的選單，按鈕和選項連結上帶有漣漪效果。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item">Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

具有三個選項的選單，其中第二個選項預設為停用狀態。

<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item" disabled>Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>

設定選項

MDL CSS 類別將各種預定義的視覺和行為增強應用於選單。下表列出了可用的類別及其效果。

(1) 此處使用「more-vert」圖示類別作為範例。可以通過修改類別名稱來使用其他圖示。如需可用圖示的列表，請參閱此頁面；將滑鼠懸停在圖示上即可查看其類別名稱。

(2) 「button」元素中的 i 或 span 元素可以互換使用。

**注意：**提供了選單選項的停用版本，並使用標準 HTML 布林屬性 disabled 或 data-mdl-disabled 進行調用。 <li class="mdl-menu__item" disabled>中等</li> 可以通過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) **滑桿**組件是新 HTML5 <input type="range"> 元素的增強版本。滑桿由一條水平線組成，線上有一個小的可移動圓盤（稱為 *拇指*），通常還帶有文字，清楚地傳達使用者移動拇指時將設定的值。

滑桿是使用者介面中一個相當新的功能，允許使用者通過在範圍內移動拇指來選擇一個值（左側為較低值，右側為較高值）。它們的設計和使用是整體使用者體驗的一個重要因素。有關詳細資訊，請參閱滑桿組件的Material Design 規範頁面。

增強的滑桿組件可以初始或以程式設計方式 *停用*。

要包含 MDL **滑桿**組件

1. 編寫一個 <p> 段落元素，並根據需要設定其樣式。包含一個 CSS width 屬性（直接或通過 CSS 類別），用於決定滑桿的大小。

<p style="width:300px">
...
</p>

2. 在段落容器內，編寫一個 <input> 元素，並為其指定一個 type 屬性，其值為 "range"。還要為其指定一個 id 屬性，使其可供腳本使用，以及 min 和 max 屬性，其值指定滑桿的範圍。為其指定一個 value 屬性，其值設定初始拇指位置（可選；如果省略，則預設為最大值的 50%），以及一個 step 屬性，其值指定拇指移動的增量（也是可選的；如果省略，則預設為 1）。最後，為其指定一個事件處理程式，在使用者更改滑桿值時執行。

<p style="width:300px">
  <input type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

3. 使用 class 屬性，將一個或多個 MDL 類別（以空格分隔）添加到滑桿。

<p style="width:300px">
  <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

滑桿組件已準備就緒。

範例

用於控制音量的滑桿。

<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

設定選項

MDL CSS 類別將各種預定義的視覺和行為增強應用於滑桿。下表列出了可用的類別及其效果。

**注意：**提供了滑桿的停用版本，並使用標準 HTML 布林屬性 disabled 進行調用。 <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled> 可以通過腳本以程式設計方式添加或移除此屬性。

**注意：**雖然 *value* 屬性用於設定滑桿的初始值，但不應使用它以程式設計方式修改值；而應使用 MDL change() 方法。例如，假設 *slider1* 是一個滑桿物件，而 *newvalue* 是一個包含所需值的變數，請勿使用 slider1.value = newvalue；而應使用 slider1.MaterialSlider.change(newvalue)。

授權

版權所有 Google，2015。根據 Apache-2 授權條款授權。

簡介

Material Design Lite (MDL) **snackbar** 組件是一個用於通知使用者操作狀態的容器。它顯示在螢幕底部。snackbar 可以包含一個動作按鈕，用於為使用者執行命令。例如，動作應該復原已提交的動作，或者在動作失敗時重試。動作不應該是關閉 snackbar。如果不提供動作，snackbar 就會變成 **toast** 組件。

基本用法

使用容器 div 元素啟動 snackbar。在該容器上定義 mdl-js-snackbar 和 mdl-snackbar 類別。為此容器添加 aria-live 和 aria-atomic 值也是有益的。

在容器內建立一個訊息的容器元素。此元素應具有 mdl-snackbar__text 類別。將此元素留空！文字是在呼叫顯示 snackbar 時添加的。

在容器中的第二個位置，添加一個 button 元素。此元素應具有 mdl-snackbar__action 類別。建議將 type 設定為 button，以確保不會意外提交任何表單。此處也請將文字內容留空！不要直接套用任何事件處理程式。

現在您已完成 snackbar 運作所需的完整標記。剩下的就是在 JavaScript 中呼叫 snackbar 容器上的 showSnackbar 方法。這需要一個純物件來適當地配置 snackbar 內容。您可以連續多次呼叫它，訊息將會堆疊。

範例

所有 snackbar 都應該通過同一個元素顯示。

標記

<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button type="button" class="mdl-snackbar__action"></button>
</div>

注意：在此範例中，有一些用於輔助功能的 aria 屬性。請根據您的網站需要修改這些屬性。

Snackbar

var notification = document.querySelector('.mdl-js-snackbar');
var data = {
  message: 'Message Sent',
  actionHandler: function(event) {},
  actionText: 'Undo',
  timeout: 10000
};
notification.MaterialSnackbar.showSnackbar(data);

Toast

var notification = document.querySelector('.mdl-js-snackbar');
notification.MaterialSnackbar.showSnackbar(
  {
    message: 'Image Uploaded'
  }
);

CSS 類別

區塊

元素

修飾符

資料物件

Snackbar 組件的 showSnackbar 方法採用一個物件作為 snackbar 資料。下表顯示了屬性及其用法。

簡介

Material Design Lite (MDL) **核取方塊**組件是標準 HTML <input type="checkbox"> 元素的增強版本。核取方塊由一個小正方形和通常用於清楚傳達二進位條件的文字組成，當使用者點擊或觸摸它時，該條件將會設定或取消設定。核取方塊通常（但不一定）成組出現，並且可以單獨選取和取消選取。MDL 核取方塊組件允許您添加顯示和點擊效果。

核取方塊是大多數使用者介面的常見功能，與網站的內容或功能無關。因此，它們的設計和使用是整體使用者體驗的一個重要因素。有關詳細資訊，請參閱核取方塊組件的Material Design 規範頁面。

增強的核取方塊組件比標準核取方塊具有更生動的視覺外觀，並且可以初始或以程式設計方式 *停用*。

要包含 MDL **核取方塊**組件

 1. 編寫一個 <label> 元素，並賦予它一個 for 屬性，其值為它將包含的核取方塊的唯一 ID。當 <input> 元素包含在 <label> 元素內時，for 屬性是可選的，但為了清晰起見，建議使用。

<label for="chkbox1">
...
</label>

 2. 在標籤內，編寫一個 <input> 元素，並賦予它一個 type 屬性，其值為 "checkbox"。還要賦予它一個 id 屬性，其值與標籤的 for 屬性值相符。

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
</label>

 3. 同樣在標籤內，在核取方塊之後，編寫一個 <span> 元素，其中包含核取方塊的文字標題。

<label for="chkbox1">
  <input type="checkbox" id="chkbox1">
  <span>Enable AutoSave</span>
</label>

 4. 使用 class 屬性，將一個或多個以空格分隔的 MDL 類別添加到標籤、核取方塊和標題。

<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
  <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Enable AutoSave</span>
</label>

核取方塊元件已準備就緒，可以開始使用。

範例

具有漣漪點擊效果的核取方塊。

<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
  <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Enable AutoSave</span>
</label>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能應用於核取方塊。下表列出了可用的類別及其效果。

注意：提供了所有可用核取方塊類型的禁用版本，並使用標準 HTML 布林屬性 disabled 呼叫。<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled> 可以透過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) 單選按鈕元件是標準 HTML <input type="radio"> 或「單選按鈕」元素的增強版本。單選按鈕由一個小圓圈和通常清楚傳達使用者點擊或觸摸時將設定之條件的文字組成。單選按鈕始終以兩個或多個為一組出現，雖然它們可以單獨選取，但只能透過選取同一組中的另一個單選按鈕來取消選取（這會取消選取該組中的所有其他單選按鈕）。MDL 單選按鈕元件允許您添加顯示和點擊效果。

無論網站的內容或功能如何，單選按鈕都是大多數使用者介面的常見功能。因此，它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱單選按鈕元件的Material Design 規格頁面。

增強的單選按鈕元件比標準單選按鈕具有更生動的視覺效果，並且可以初始或以程式設計方式設定為*禁用*。

要包含 MDL 單選按鈕元件

 1. 編寫一個 <label> 元素，並賦予它一個 for 屬性，其值為它將包含的單選按鈕的唯一 ID。當 <input> 元素包含在 <label> 元素內時，for 屬性是可選的，但為了清晰起見，建議使用。

<label for="radio1">
...
</label>

 2. 在標籤內，編寫一個 <input> 元素，並賦予它一個 type 屬性，其值為 "radio"。還要賦予它一個 id 屬性，其值與標籤的 for 屬性值相符，以及一個 name 屬性，其值用於識別單選按鈕組。或者，賦予它一個 value 屬性，其值提供一些關於單選按鈕的資訊，以供腳本使用。

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
</label>

 3. 同樣在標籤內，在單選按鈕之後，編寫一個 <span> 元素，其中包含單選按鈕的文字標題。

<label for="radio1">
  <input type="radio" id="radio1" name="flash" value="on">
  <span>Always on</span>
</label>

 4. 使用 class 屬性，將一個或多個以空格分隔的 MDL 類別添加到標籤、核取方塊和標題。

<label for="radio1" class="mdl-radio mdl-js-radio">
  <input type="radio" id="radio1" name="flash" value="on" class="mdl-radio__button">
  <span class="mdl-radio__label">Always on</span>
</label>

 5. 對組中的其他單選按鈕元件重複步驟 1 到 4。對於每個元件

• 在 label 元素上，指定唯一的 for 屬性值
• 在 input 元素上，指定一個 id 屬性值，使其與其 label 元素的 for 屬性值相符
• 在 input 元素上，為組中的所有單選按鈕元件指定相同的 name 屬性值
• 或者，在 input 元素上，指定唯一的 value 屬性值

單選按鈕元件已準備就緒，可以開始使用。

範例

一組單選按鈕，用於控制相機的閃光燈設定。

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
  <input checked class="mdl-radio__button" id="flash1" name="flash" type="radio"
   value="on">
  <span class="mdl-radio__label">Always on</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
  <input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
  <span class="mdl-radio__label">Always off</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
  <input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
  <span class="mdl-radio__label">Automatic</span>
</label>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能應用於單選按鈕。下表列出了可用的類別及其效果。

注意：提供了所有可用單選按鈕類型的禁用版本，並使用標準 HTML 布林屬性 disabled 呼叫。<input type="radio" id="radio5" name="flash" class="mdl-radio__button" disabled> 可以透過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) 的圖示切換元件是標準 HTML <input type="checkbox"> 元素的增強版本。圖示切換包含一個使用者定義的圖示，透過視覺醒目顯示，指示當使用者點擊或觸摸它時將設定或取消設定的二進位狀態。與核取方塊類似，圖示切換可以單獨出現或成組出現，並且可以單獨選取和取消選取。

圖示切換，特別是作為某些核取方塊的替代品，可以成為使用者介面中的一項寶貴功能，無論網站的內容或功能如何。因此，它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱圖示切換元件的 Material Design 規格頁面。

圖示切換元件可以比標準核取方塊具有更自訂的視覺外觀，並且可以初始或以程式設計方式設定為*禁用*。

要包含 MDL 圖示切換元件

 1. 編寫一個 <label> 元素，並賦予它一個 for 屬性，其值為它將包含的圖示切換的唯一 ID。

<label for="icon-toggle-1">
...
</label>

 2. 在標籤內，編寫一個 <input> 元素，並賦予它一個 type 屬性，其值為 "checkbox"。還要賦予它一個 id 屬性，其值與標籤的 for 屬性值相符。

<label for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1">
</label>

 3. 同樣在標籤內，在輸入元素之後，編寫一個 <i> 元素，其中包含圖示切換所需的圖示。

<label for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

 4. 使用 class 屬性，將一個或多個以空格分隔的 MDL 類別添加到標籤和輸入元素。

<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">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

圖示切換元件已準備就緒，可以開始使用。

範例

具有漣漪點擊效果的圖示切換。

<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">
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能應用於圖示切換。下表列出了可用的類別及其效果。

注意：提供了所有可用輸入類型的禁用版本，並使用標準 HTML 布林屬性 disabled 呼叫。<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled> 可以透過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) 開關元件是標準 HTML <input type="checkbox"> 元素的增強版本。開關由一條短的水平「軌道」和一個醒目的圓形狀態指示器組成，通常還帶有文字，清楚地傳達當使用者點擊或觸摸它時將設定或取消設定的二進位狀態。與核取方塊類似，開關可以單獨出現或成組出現，並且可以單獨選取和取消選取。然而，開關提供了更直觀的狀態視覺表示：左/灰色表示*關閉*，右/彩色表示*開啟*。MDL 開關元件允許您添加顯示和點擊效果。

開關，特別是作為某些核取方塊的替代品，可以成為使用者介面中的一項寶貴功能，無論網站的內容或功能如何。因此，它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱開關元件的 Material Design 規格頁面。

增強的開關元件比標準核取方塊具有更生動的視覺效果，並且可以初始或以程式設計方式設定為*禁用*。

要包含 MDL 開關元件

 1. 編寫一個 <label> 元素，並賦予它一個 for 屬性，其值為它將包含的開關的唯一 ID。

<label for="switch1">
...
</label>

 2. 在標籤內，編寫一個 <input> 元素，並賦予它一個 type 屬性，其值為 "checkbox"。還要賦予它一個 id 屬性，其值與標籤的 for 屬性值相符。

<label for="switch1">
  <input type="checkbox" id="switch1">
</label>

 3. 同樣在標籤內，在核取方塊之後，編寫一個 <span> 元素，其中包含開關的文字標題。

<label for="switch1">
  <input type="checkbox" id="switch1">
  <span>Sound off/on</span>
</label>

 4. 使用 class 屬性，將一個或多個以空格分隔的 MDL 類別添加到標籤、開關和標題。

<label for="switch1" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch1" class="mdl-switch__input">
  <span class="mdl-switch__label">Sound off/on</span>
</label>

開關元件已準備就緒，可以開始使用。

範例

具有漣漪點擊效果的開關。

<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
  <input type="checkbox" id="switch1" class="mdl-switch__input">
  <span class="mdl-switch__label">Sound off/on</span>
</label>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能應用於開關。下表列出了可用的類別及其效果。

注意：提供了所有可用開關類型的禁用版本，並使用標準 HTML 布林屬性 disabled 呼叫。<input type="checkbox" id="switch5" class="mdl-switch__input" disabled> 可以透過腳本以程式設計方式添加或移除此屬性。

簡介

Material Design Lite (MDL) 資料表元件是標準 HTML <table> 的增強版本。資料表由格式良好的資料列和資料行組成，並提供適當的使用者互動功能。

無論網站的內容或功能如何，表格都是大多數使用者介面的普遍功能。因此，它們的設計和使用是整體使用者體驗的重要因素。有關詳細資訊，請參閱資料表元件的 Material Design 規格頁面。

資料表中可用的列/欄/儲存格類型大多數都是自動格式化的；也就是說，一旦定義了資料表，個別儲存格就幾乎不需要特別注意。例如，滑鼠移過和選取時，列會顯示陰影行為，數值預設會自動格式化，並且新增單個類別即可讓表格列單獨或共同選取。這使得資料表元件對於開發人員來說方便易於編寫程式碼，同時對於使用者來說也具有吸引力和直觀性。

要包含 MDL 資料表元件

 1. 編寫一個 <table> 元素。包含 <thead> 和 <tbody> 元素，分別用於存放標題列和資料列。

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

 2. 使用 class 屬性，將一個或多個以空格分隔的 MDL 類別添加到表格。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

 2. 在 <thead> 內，編寫正好一個表格列 <tr>，其中包含每個欄位一個表格標題儲存格 <th>，並在標題儲存格中包含所需的文字。為了確保標題對齊正確，請將「非數值」MDL 類別添加到純文字欄位的標題儲存格。（資料儲存格預設格式化為數值。）

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>ID Number</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

3. 在 <tbody> 內，為每一列資料編寫一個表格列 <tr>，並為該列中的每一欄編寫一個表格資料儲存格 <td>。與標題儲存格一樣，將「非數值」MDL 類別新增至僅包含文字的資料儲存格，以確保正確對齊。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>ID Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
      <td>25</td>
      <td>49021</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
      <td>32</td>
      <td>10258</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
      <td>29</td>
      <td>12359</td>
    </tr>
  </tbody>
</table>

資料表格元件已可使用。

範例

一個具有「主要」選取核取方塊和個別列選取核取方塊的資料表格。

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>250</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$12.35</td>
    </tr>
  </tbody>
</table>

一個不含選取核取方塊且主要包含文字資料的資料表格。

<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th class="mdl-data-table__cell--non-numeric">Nickname</th>
      <th>Age</th>
      <th class="mdl-data-table__cell--non-numeric">Living?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">John Lennon</td>
      <td class="mdl-data-table__cell--non-numeric">The smart one</td>
      <td>40</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
      <td class="mdl-data-table__cell--non-numeric">The cute one</td>
      <td>73</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">George Harrison</td>
      <td class="mdl-data-table__cell--non-numeric">The shy one</td>
      <td>58</td>
      <td class="mdl-data-table__cell--non-numeric">No</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
      <td class="mdl-data-table__cell--non-numeric">The funny one</td>
      <td>74</td>
      <td class="mdl-data-table__cell--non-numeric">Yes</td>
    </tr>
  </tbody>
</table>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能套用至資料表格。下表列出了可用的類別及其效果。

簡介

Material Design Lite (MDL) 文字欄位元件是標準 HTML <input type="text"> 和 <input type="textarea"> 元素的增強版本。文字欄位包含一條水平線，指示鍵盤輸入可以發生的位置，以及通常清楚傳達文字欄位預期內容的文字。MDL 文字欄位元件提供各種文字欄位類型，並允許您新增顯示和點擊效果。

無論網站的內容或功能為何，文字欄位都是大多數使用者介面的常見功能。因此，它們的設計和使用是整體使用者體驗的重要因素。詳情請參閱文字欄位元件的Material Design 規格頁面。

增強的文字欄位元件比標準文字欄位具有更生動的視覺外觀，並且可以初始或以程式設計方式設定為_停用_。文字欄位元件有三種主要類型的文字欄位，每一種都有其基本的編碼需求。這些類型為_單行_、_多行_和_可展開_。

要包含_單行_ MDL 文字欄位元件

1. 編寫一個 <div> 元素來容納文字欄位。

<div>
...
</div>

2. 在 div 內，編寫一個 <input> 元素，其 type 屬性為 "text"（文字欄位），以及您選擇的 id 屬性。

<div>
  <input type="text" id="user">
</div>

3. 此外，在 div 內，在文字欄位之後，編寫一個 <label> 元素，其 for 屬性值與 input 元素的 id 值相符，以及一個用作欄位佔位符文字的短字串。

<div>
  <input type="text" id="user">
  <label for="user">User name</label>
</div>

4. （選用）將 pattern 屬性和值新增至 <input> 元素（詳情請參閱W3C HTML5 表單規格），並在 <label> 後面的 <span> 元素中新增相關聯的錯誤訊息。

<div>
  <input type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label for="user">User name</label>
  <span>Letters and spaces only</span>
</div>

5. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增至 div 容器、文字欄位、欄位標籤和錯誤訊息。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
  <label class="mdl-textfield__label" for="user">User name</label>
  <span class="mdl-textfield__error">Letters and spaces only</span>
</div>

單行文字欄位元件已可使用。

範例

具有標準標籤的單行文字欄位。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="fname">
  <label class="mdl-textfield__label" for="fname">First name</label>
</div>

具有浮動標籤的單行文字欄位。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="addr1">
  <label class="mdl-textfield__label" for="addr1">Address line 1</label>
</div>

具有標準標籤、模式比對和錯誤訊息的單行文字欄位。

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
  <label class="mdl-textfield__label" for="phone">Phone</label>
  <span class="mdl-textfield__error">Digits only</span>
</div>

要包含_多行_ MDL 文字欄位元件

1. 編寫一個 <div> 元素來容納文字欄位。

<div>
...
</div>

2. 在 div 內，編寫一個 <textarea> 元素，其 type 屬性為 "text"（多行文字欄位），以及您選擇的 id 屬性。包含一個 rows 屬性，其值為 "1"（此屬性設定_同時可見_的輸入列數）。

<div>
  <textarea type="text" rows="1" id="address"></textarea>
</div>

3. 此外，在 div 內，在文字欄位之後，編寫一個 <label> 元素，其 for 屬性值與 <textarea> 元素的 id 值相符，以及一個用作欄位佔位符文字的短字串。

<div>
  <textarea type="text" rows="1" id="address"></textarea>
  <label for="address">Full address</label>
</div>

4. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增至 div 容器、文字欄位和欄位標籤。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
  <label class="mdl-textfield__label" for="address">Full address</label>
</div>

多行文字欄位元件已可使用。

範例

具有一條可見輸入行的多行文字欄位。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

具有一條可見輸入行和浮動標籤的多行文字欄位。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended</label>
</div>

具有多條可見輸入行和最大行數的多行文字欄位。

<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
   id="schools"></textarea>
  <label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
</div>

要包含_可展開_ MDL 文字欄位元件

1. 編寫一個「外部」 <div> 元素來容納可展開文字欄位。

<div>
...
</div>

2. 在 div 內，編寫一個 <label> 元素，其 for 屬性值將與 <input> 元素的 id 值（將在步驟 5 中編寫）相符。

<div>
  <label for="expando1">
  ...
  </label>
</div>

3. 在標籤內，編寫一個 <span> 元素；該 span 應為空，並且應為標籤的唯一內容。此元素將包含可展開文字欄位的圖示。

<div>
  <label for="expando1">
    <span></span>
  </label>
</div>

4. 仍在「外部」div 內，在包含 span 的標籤之後，編寫一個「內部」（巢狀） <div> 元素。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
  ...
  </div>
</div>

5. 在「內部」div 內，編寫一個 <input> 元素，其 type 屬性為 "text"（文字欄位），以及一個 id 屬性，其值與步驟 2 中的 for 屬性值相符。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
  </div>
</div>

6. 仍在「內部」div 內，在文字欄位之後，編寫一個 <label> 元素，其 for 屬性值也與 <input> 元素的 id 值（在步驟 5 中編寫）相符，以及一個用作欄位佔位符文字的短字串。

<div>
  <label for="expando1">
    <span></span>
  </label>
  <div>
    <input type="text" id="expando1">
    <label for="expando1">Expandable text field</label>
  </div>
</div>

7. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增至「外部」div 容器、標籤和 span，以及「內部」div 容器、文字欄位和欄位標籤。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="expando1">
    <label class="mdl-textfield__label" for="expando1">Expandable text field</label>
  </div>
</div>

可展開文字欄位元件已可使用。當點擊圖示（空的 <span>）或取得焦點時，它將展開。

範例

具有標準標籤的可展開文字欄位。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable">
    <label class="mdl-textfield__label" for="search-expandable">Search text</label>
  </div>
</div>

具有浮動標籤的可展開文字欄位。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
 mdl-textfield--floating-label">
  <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
    <i class="material-icons">search</i>
  </label>
  <div class="mdl-textfield__expandable-holder">
    <input class="mdl-textfield__input" type="text" id="search-expandable2">
    <label class="mdl-textfield__label" for="search-expandable2">
      Enter search text below
    </label>
  </div>
</div>

設定選項

MDL CSS 類別會將各種預先定義的視覺和行為增強功能套用至文字欄位。下表列出了可用的類別及其效果。

(1) 此處使用「搜尋」圖示作為範例。可以透過修改文字來使用其他圖示。如需可用圖示的清單，請參閱此頁面。

注意： 提供了每種文字欄位類型的停用版本，並使用標準 HTML 布林屬性 disabled 呼叫。 <input class="mdl-textfield mdl-js-textfield" type="text" disabled> 可以透過腳本以程式設計方式新增或移除此屬性。

簡介

Material Design Lite (MDL) 工具提示元件是標準 HTML 工具提示的增強版本，由 title 屬性產生。工具提示包含文字和/或圖像，當使用者將滑鼠懸停在元素上或在觸控式使用者介面中觸控元素時，會清楚地傳達有關該元素的其他資訊。MDL 工具提示元件已預先設定樣式（顏色、字型和其他設定包含在 _material.min.css_ 中），以提供生動、吸引人的視覺元素，顯示相關但通常非必要的內容，例如定義、說明或簡要說明。

無論網站的內容或功能為何，工具提示都是大多數使用者介面的普遍功能。它們的設計和使用是整體使用者體驗的重要因素。詳情請參閱工具提示元件的Material Design 規格頁面。

要包含 MDL 工具提示元件

1. 編寫一個元素，例如 <div>、<p> 或 <span>，並根據需要設定其樣式；這將是工具提示的目標。包含一個 id 屬性和唯一值，以將容器連結到其工具提示。

<p id="tt1">HTML</p>

2. 在目標元素之後，編寫第二個元素，例如 <div>、<p> 或 <span>；這將是工具提示本身。包含一個 for（或 data-mdl-for）屬性，其值與目標的 id 相符。

<p id="tt1">HTML</p>
<span for="tt1">HyperText Markup Language</span>

3. 使用 class 屬性將一個或多個以空格分隔的 MDL 類別新增至工具提示元素。

<p id="tt1">HTML</p>
<span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>

工具提示元件已可使用。

範例

具有簡單文字工具提示的目標。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>

具有「豐富」（包含 HTML 標記）工具提示文字的目標。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>

具有自動換行的長文字工具提示的目標。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>

具有較大字型大小的工具提示文字的目標。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>

具有包含圖像和文字的工具提示的目標。

<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">
<img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>

設定選項

MDL CSS 類別會將各種預先定義的視覺增強功能套用至工具提示。下表列出了可用的類別及其效果。