简介

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值通常应包含 1 到 3 个字符。超过三个字符不会导致错误，但某些字符可能会超出徽章范围，因此难以或无法看到。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 按钮组件提供了各种类型的按钮，并允许您添加显示和单击效果。

按钮是大多数用户界面中普遍存在的特性，无论网站的内容或功能如何。因此，其设计和使用是整体用户体验中的一个重要因素。有关详细信息，请参阅按钮组件的材料设计规范页面。

可用的按钮显示类型有扁平（默认）、凸起、悬浮操作按钮、迷你悬浮操作按钮和图标；这些类型中的任何一个都可以是普通的（浅灰色）或彩色的，并且可以最初或通过编程方式禁用。悬浮操作按钮、迷你悬浮操作按钮和图标按钮类型通常使用小图像作为其标题而不是文本。

要包含 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>

带有“悬浮操作按钮”效果的按钮。

<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>
</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. 将内容添加到每个“内部”div 中，同样取决于其预期用途，使用标准 HTML 元素，并可选择添加其他 MDL 类。

<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 时，该元素**必须**是 body 元素的子元素。在该容器内，添加一个具有 mdl-dialog__content 类的内容元素。添加您的内容，然后创建一个具有 mdl-dialog__actions 类的操作容器。最后，在标记中，在此容器内添加您的按钮以触发对话框功能。

请记住，操作的顺序会自动反转。Material Design 要求最后一个显示主要（确认）操作。因此，您创建的第一个操作将在操作栏的最后显示。这允许更自然的编码和选项卡排序，同时遵循规范。

请务必为您的操作项添加事件处理程序。创建对话框标记后，将事件侦听器添加到页面以触发对话框显示。

例如

  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) **网格**组件是一种简化的内容布局方法，适用于多种屏幕尺寸。它减少了在各种显示条件下正确显示内容块所需的常规编码负担。

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 类添加到“内部”div 中，其中 COLUMN 指定单元格的列大小。

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

 3. 在第一个“内部”div（选项卡）内，为每个选项卡编写一个锚 <a>（链接）标签。包含具有匹配选项卡 id 属性值的 href 属性，以及一些简短的链接文本。在其余的“内部”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>元素以包含您选择的图标。

<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>Medium</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和atomic值添加到此容器也很有益。

在容器内，为消息创建一个容器元素。此元素应具有类mdl-snackbar__text。保持此元素为空！显示Snackbar时会添加文本。

其次，在容器中添加一个按钮元素。此元素应具有类mdl-snackbar__action。建议将类型设置为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. 可选地，向<input>元素添加pattern属性和值（有关详细信息，请参阅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>

多行文本字段组件已准备好使用。

示例

带有 1 行可见输入的多行文本字段。

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

带有 1 行可见输入和浮动标签的多行文本字段。

<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属性生成）的增强版本。工具提示包含文本和/或图像，当用户将鼠标悬停在元素上或在基于触摸的UI中触摸元素时，清晰地传达有关元素的其他信息。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类为工具提示应用各种预定义的视觉增强功能。下表列出了可用的类及其效果。