Components
组件
Material Design Lite (MDL) 是一个基于Material Design理念的web开发组件库:“为用户提供一种视觉语言,综合优秀设计的经典定则,同时还伴有科学技术的可能性。” 理解Material Design的目标和原则是正确使用Material Design Lite组件的关键 。如果你还没有读过 Material Design Introduction 你在尝试使用该组件前应当读一读这份文档。

徽章

为UI元素添加小的状态描述。

account_box
account_box
Number
Icon
<!-- Number badge on icon -->
      <span class="material-icons mdl-badge" data-badge="1">account_box</span>
    
<style></style>
<!-- Icon badge on icon --> <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Inbox
Mood
Number
Icon
<!-- Number badge -->
      <span class="mdl-badge" data-badge="4">Inbox</span>
    
<style></style>
<!-- Icon badge --> <span class="mdl-badge" data-badge="♥">Mood</span>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 徽章 组件是一个屏幕通知元素。徽章有一个小圆圈,通常包含一个数字或其他字符,出现在接近另一个对象的位置。徽章既可以通知与对象关联的附加项目信息,也可以指明项目的数量。

你可以用徽章来不明显地引起用户的关注,这些项目可能没有其他的通知,或者强调有可能需要他们的注意力。例如:

  • 一个“新消息”的通知徽章,并包含未读信息的数量。
  • 一个“购物车中未购买的物品”提醒徽章来显示在购物车中的项目数。
  • 一个“加入讨论!”按钮可能有一个附带的徽章表明目前参与讨论的用户数。

徽章几乎总是位于接近链接的位置,使得用户可以方便的访问由badge所指示的附件信息。然而,根据不同的目的,徽章本身可以是或可以不是链接的一部分。

徽章在用户界面中是一个比较新颖的功能,允并为用户提供一个可视化的线索,帮助他们找到更多的相关内容。它们的设计和使用是在整体用户体验中的一个重要因素。

包含一个MDL 徽章 组件:

 1. 编码一个 <a> (锚点/链接)或者一个 <span> 元素。包括任何期望的属性和内容。

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

 2. 添加一个或多个MDL class,用空格分隔,到徽章的 class 属性上。

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

 3. 给徽章添加 data-badge 属性和引号包围的string值。

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

徽章组件已经就绪了

Note: 由于徽章组件尺寸比较小, data-badge 的值通常含有1到3个字节。 超过三个字节并不会引发错误,但一些字节会超出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 class 可以应用多种预定义视觉效果和行为增强到徽章上,下边的表格列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-badge 定义badge作为一个MDL组件 在span或link上必须
mdl-badge--no-background 应用开放-圆效果到徽章 可选
mdl-badge--overlap 使badge“压在”他的容器上 可选
data-badge="value" 给badge赋值 不是class,但是一个单独的属性,在span或link上必须

按钮

MATERIAL DESIGN按钮的变种。

Colored FAB
With ripple
<!-- Colored FAB button -->
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
      <i class="material-icons">add</i>
      </button>
    
<style></style>
<!-- Colored FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class="material-icons">add</i> </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Plain FAB
With ripple
Disabled
<!-- FAB button -->
      <button class="mdl-button mdl-js-button mdl-button--fab">
      <i class="material-icons">add</i>
      </button>
    
<style></style>
<!-- FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class="material-icons">add</i> </button>
<style></style>
<!-- Disabled FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab" disabled> <i class="material-icons">add</i> </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Raised Button
With ripple
Disabled
<!-- Raised button -->
      <button class="mdl-button mdl-js-button mdl-button--raised">
      Button
      </button>
    
<style></style>
<!-- Raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> Button </button>
<style></style>
<!-- Raised disabled button--> <button class="mdl-button mdl-js-button mdl-button--raised" disabled> Button </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Colored button
Accent colored
With Ripples
<!-- Colored raised button -->
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      Button
      </button>
    
<style></style>
<!-- Accent-colored raised button --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> Button </button>
<style></style>
<!-- Accent-colored raised button with ripple --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Button </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Flat button
With ripple
Disabled
<!-- Flat button -->
      <button class="mdl-button mdl-js-button">
      Button
      </button>
    
<style></style>
<!-- Flat button with ripple --> <button class="mdl-button mdl-js-button mdl-js-ripple-effect"> Button </button>
<style></style>
<!-- Disabled flat button --> <button class="mdl-button mdl-js-button" disabled> Button </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Primary colored flat
Accent colored flat
<!-- Primary-colored flat button -->
      <button class="mdl-button mdl-js-button mdl-button--primary">
      Button
      </button>
    
<style></style>
<!-- Accent-colored flat button --> <button class="mdl-button mdl-js-button mdl-button--accent"> Button </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Icon button
Colored
<!-- Icon button -->
      <button class="mdl-button mdl-js-button mdl-button--icon">
      <i class="material-icons">mood</i>
      </button>
    
<style></style>
<!-- Colored icon button --> <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"> <i class="material-icons">mood</i> </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Mini FAB
Colored
<!-- Mini FAB button -->
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
      <i class="material-icons">add</i>
      </button>
    
<style></style>
<!-- Colored mini FAB button --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"> <i class="material-icons">add</i> </button>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 按钮 组件是标准HTML <button> 元素的增强版本。 一个按钮包含可以清楚传达出当用户点击或触摸它时会发生的事情的文本和/或图片。 MDL 按钮组件提供多种类型的按钮,并允许用户添加显示和点击效果。

按钮是多数的用户界面的一个常见功能,无论一个网站的内容或功能。它们的设计和使用是在整体用户体验中的一个重要因素。 查看按钮组件的 Material Design specifications page 获取详细信息。

可用的按钮显示效果包括 扁平(默认), 浮动,悬浮响应按钮,迷你悬浮响应按钮,图标按钮。 这些类型都可以是朴素(浅灰)或彩色的。并可以初始化时或以编程方式禁用。 悬浮响应按钮,迷你悬浮响应按钮,图标按钮通常使用小型图片作为标题而不是文字。

包含一个 MDL 按钮 组件:

 1. 编码一个 <button> 元素,包含任何期望的属性和值,比如id和事件处理程序,同时添加文字标题或贴切的图片。

<button>Save</button>

 2. 添加一个或多个MDL class,用空格分隔,button的 class 属性上。

<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 class 可以应用多种预定义视觉效果和行为增强到按钮上,下边表格列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-button 定义按钮作为一个MDL组件 必须
mdl-js-button 赋予基本的MDL行为到按钮 必须
(none) 应用扁平效果到按钮(默认)
mdl-button--raised 应用浮动效果 与悬浮响应按钮,迷你悬浮响应按钮,图标按钮互斥
mdl-button--fab 应用悬浮响应(圆)显示效果 与浮动按钮,迷你悬浮响应按钮,图标按钮互斥
mdl-button--mini-fab 应用迷你悬浮响应(小型悬浮圆)显示效果 与浮动按钮,悬浮响应按钮,图标按钮互斥
mdl-button--icon 应用图标按钮(小型朴实圆)显示效果 与浮动按钮,悬浮响应按钮,迷你悬浮响应按钮互斥
mdl-button--colored 应用彩色显示效果 material.min.css 中定义的颜色
mdl-button--primary 应用主色调显示效果 material.min.css 中定义的颜色
mdl-button--accent 应用点缀色显示效果 material.min.css 中定义的颜色
mdl-js-ripple-effect 应用墨水扩散的点击效果 应与其他class一起使用

Note: 各类型按钮的disabled版本都有提供,可以通过标准的HTML布尔属性 disabled来调用。 <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>。 另外, mdl-button--disabled 这个class也可以用来实现同样效果。这个标签可以通过脚本程序来添加或移除。

卡片

卡片是包含一组特定数据集的纸片。

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
Wide
<!-- Wide card with share menu button -->
      <style>
      .demo-card-wide.mdl-card {
      width: 512px;
      }
      .demo-card-wide > .mdl-card__title {
      color: #fff;
      height: 176px;
      background: url('../assets/demos/welcome_card.jpg') center / cover;
      }
      .demo-card-wide > .mdl-card__menu {
      color: #fff;
      }
      </style>

      <div class="demo-card-wide mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Welcome</h2>
      </div>
      <div class="mdl-card__supporting-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Mauris sagittis pellentesque lacus eleifend lacinia...
      </div>
      <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
      </a>
      </div>
      <div class="mdl-card__menu">
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
      </button>
      </div>
      </div>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
Square
<!-- Square card -->
      <style>
      .demo-card-square.mdl-card {
      width: 320px;
      height: 320px;
      }
      .demo-card-square > .mdl-card__title {
      color: #fff;
      background:
      url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
      }
      </style>

      <div class="demo-card-square mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand">
      <h2 class="mdl-card__title-text">Update</h2>
      </div>
      <div class="mdl-card__supporting-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
      </a>
      </div>
      </div>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Image.jpg

Featured event:
May 24, 2016
7-11pm

Image
Event
<!-- Image card -->
      <style>
      .demo-card-image.mdl-card {
      width: 256px;
      height: 256px;
      background: url('../assets/demos/image_card.jpg') center / cover;
      }
      .demo-card-image > .mdl-card__actions {
      height: 52px;
      padding: 16px;
      background: rgba(0, 0, 0, 0.2);
      }
      .demo-card-image__filename {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      }
      </style>

      <div class="demo-card-image mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title mdl-card--expand"></div>
      <div class="mdl-card__actions">
      <span class="demo-card-image__filename">Image.jpg</span>
      </div>
      </div>
    
<style></style>
<!-- Event card --> <style> .demo-card-event.mdl-card { width: 256px; height: 256px; background: #3E4EB8; } .demo-card-event > .mdl-card__actions { border-color: rgba(255, 255, 255, 0.2); } .demo-card-event > .mdl-card__title { align-items: flex-start; } .demo-card-event > .mdl-card__title > h4 { margin-top: 0; } .demo-card-event > .mdl-card__actions { display: flex; box-sizing:border-box; align-items: center; } .demo-card-event > .mdl-card__title, .demo-card-event > .mdl-card__actions, .demo-card-event > .mdl-card__actions > .mdl-button { color: #fff; } </style> <div class="demo-card-event mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h4> Featured event:<br> May 24, 2016<br> 7-11pm </h4> </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Add to Calendar </a> <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div> </div>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 卡片 组件是代表一个虚拟的一张纸,包含相关数据的用户界面元素 - 例如,关于单一主题的照片,文本,和链接。

卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象,像带有不同长度标题的照片。卡具有恒定的宽度和可变的高度,这取决于它们的内容。

卡片在用户界面中是一个比较新颖的功能,并允许用户接入到更复杂和更详细的信息。它们的设计和使用是在整体用户体验中的一个重要因素。 查看卡片组件的Material Design specifications page获取详细信息。

包含一个 MDL 卡片 组件:

 1. 编码一个 <div> 元素;这是一个“外部”容器,用来包含全部的card内容。

<div>
  </div>

 2. 在div内部,编码一个或多个“内部”div,每一个包含所希望的内容块。一个卡片包含标题,图片,一些文字,和一个操作条共四个内部 div,全都是平级子元素。

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

 3. 添加一个或多个MDL class,用空格分隔,到“内部”和“外部” div的 class 属性上。

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

<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 class 可以应用多种预定义视觉效果和行为增强到卡片上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 标注
mdl-card 定义div元素作为一个MDL 卡片容器 在“外部”div元素上必须
mdl-card--border 给卡片块添加边框 在“内部”div元素上必须
mdl-shadow--2dp through mdl-shadow--16dp 应用可选深度的阴影(2,3,4,6,8,16)到卡片 可选,放在“外部”div上,如果忽略,则默认无阴影
mdl-card__title 定义div作为卡片标题容器 在“内部”标题div上必须
mdl-card__title-text 分配相应的文字到卡片标题 需要在“内部”标题div中的 head标签(H1-H6)上
mdl-card__subtitle-text 分配相应的文字做卡片的子标题 可选,应作为标题元素的子元素
mdl-card__media 定义div作为卡片的媒体容器 在“内部”媒体div上必须
mdl-card__supporting-text 定义div作为卡片正文文本容器,并分配相应的文本 在“内部”正文div上必须;文本应直接插入此div而不应有其他中间div。
mdl-card__actions 定义DIV作为卡片操作的容器,并分配相应的操作文本 在“内部”操作div上必须;文本应直接插入此div而不应有其他中间div。

布局

构建页面布局模块

导航布局

Transparent header
<!-- Uses a transparent header that draws on top of the layout's background -->
      <style>
      .demo-layout-transparent {
      background: url('../assets/demos/transparent.jpg') center / cover;
      }
      .demo-layout-transparent .mdl-layout__header,
      .demo-layout-transparent .mdl-layout__drawer-button {
      /* This background is dark, so we set text to white. Use 87% black instead if
      your background is light. */
      color: white;
      }
      </style>

      <div class="demo-layout-transparent mdl-layout mdl-js-layout">
      <header class="mdl-layout__header mdl-layout__header--transparent">
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      </main>
      </div>
    
<style></style>
Title
Fixed drawer, no header
<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here --></div>
      </main>
      </div>
    
<style></style>
Fixed header
<!-- Always shows a header, even in smaller screens. -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here --></div>
      </main>
      </div>
    
<style></style>
Title
Fixed header and drawer
<!-- The drawer is always open in large screens. The header is always shown,
      even in small screens. -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
      mdl-layout--fixed-header">
      <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
      mdl-textfield--floating-label mdl-textfield--align-right">
      <label class="mdl-button mdl-js-button mdl-button--icon"
      for="fixed-header-drawer-exp">
      <i class="material-icons">search</i>
      </label>
      <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" name="sample"
      id="fixed-header-drawer-exp">
      </div>
      </div>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here --></div>
      </main>
      </div>
    
<style></style>
Scrolling header
<!-- Uses a header that scrolls with the text, rather than staying
      locked at the top -->
      <div class="mdl-layout mdl-js-layout">
      <header class="mdl-layout__header mdl-layout__header--scroll">
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here --></div>
      </main>
      </div>
    
<style></style>
Title
Title
Waterfall header
<!-- Uses a header that contracts as the page scrolls down. -->
      <style>
      .demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type  {
      padding-right: 0;
      }
      </style>

      <div class="demo-layout-waterfall mdl-layout mdl-js-layout">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
      <!-- Top row, always visible -->
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
      mdl-textfield--floating-label mdl-textfield--align-right">
      <label class="mdl-button mdl-js-button mdl-button--icon"
      for="waterfall-exp">
      <i class="material-icons">search</i>
      </label>
      <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" name="sample"
      id="waterfall-exp">
      </div>
      </div>
      </div>
      <!-- Bottom row, not visible on scroll -->
      <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      </nav>
      </div>
      <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here --></div>
      </main>
      </div>
    
<style></style>
Scrollable tabs
<!-- Simple header with scrollable tabs. -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      </div>
      <!-- Tabs -->
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      </div>
      <main class="mdl-layout__content">
      <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      </main>
      </div>
    
<style></style>
Title
Title
Fixed tabs
<!-- Simple header with fixed tabs. -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
      mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      </div>
      <!-- Tabs -->
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
      </div>
      </header>
      <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      </div>
      <main class="mdl-layout__content">
      <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="fixed-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      <section class="mdl-layout__tab-panel" id="fixed-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
      </section>
      </main>
      </div>
    
<style></style>

介绍

Material Design Lite (MDL) 布局 组件是在页面布局使用MDL开发原则的综合方法,允许有效地利用MDL组件,并自动适应不同的浏览器,屏幕尺寸和设备。

适当和易懂的布局是所有用户界面的一个重要特征,无论网站的内容或功能。因此,页面设计和演示是在整体用户体验的一个重要因素。查看布局组件的 Material Design specifications page 获取详细信息。

使用MDL布局原则,通过提供可重用的组件简化了创建可扩展的页面,并通过建立可识别的视觉元素,秉承逻辑结构网格,并保持跨多个平台和屏幕尺寸适当的差距来鼓励跨环境的一致性。MDL布局是非常强大的,动态的,允许在外观和行为保持极大的一致性,同时保持开发的灵活性和易用性。

包含一个基础 MDL 布局 组件:

 1. 编码一个 <div> 元素,这是用来保存所有布局的“外部”div,添加 MDL class 到div的 class 属性上作为说明,多个class使用空格分开。

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

 2. 在这个div内,编码一个 <header> 元素,它将用来保存header行,在大屏幕上显示为导航链接条,在小屏上上显示菜单图标,带年纪显示导航条。添加MDL class 到header

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

 3. 在header内,添加一个 <div> 用来生成菜单图标,并包含作为说明的MDL class,这个div应没有自己的内容。

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

 4. 还是在header内,添加另一个 <div> 用来保存header行内容,并添加描述的MDL class。

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

 5. 在header 行 div内,添加一个span来包含布局的标题,并添加描述的MDL class。

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

 6. 在span之后,添加一个 <div> 用来右对齐header中的导航链接,并添加描述的MDL class。

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

 7. 在间隔用的div后,添加一个 <nav> 元素来包含导航链接,并添加描述的MDL class。在nav元素内部,为每一个header链接编码一个 <a> 元素,并添加描述的MDL class,这就是完整的布局头部。

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

 8. 在header后边,添加一个 <div> 元素来保存滑出抽屉内容,并添加描述的MDL class。抽屉会自动在小屏幕上显示,并在任何尺寸屏幕上通过菜单图标打开。

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

 9. 在抽屉 div内,添加一个span来包含布局的标题(应与第5步相符合),并添加描述的MDL class。

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

 10. 在span元素后,添加一个 <nav> 元素来包含抽屉的导航链接,并未每一个抽屉链接编码一个 <a> 标签(这些应与第7步相符合),并添加描述的MDL class。这就是完整的布局抽屉。

<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 2</a>
  <a class="mdl-navigation__link" href="#">Nav link 2</a>
  <a class="mdl-navigation__link" href="#">Nav link 3</a>
  </nav>
  </div>
  </div>

 11. 最后,在抽屉div后,添加一个 <main> 元素来保存布局的主要内容,并添加描述的MDL class。在这个元素内,添加你期望的内容。

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

布局包含固定的抽屉菜单但没有header

<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 class 可以应用多种预定义视觉效果和行为增强到布局上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-layout 定义容器作为MDL组件 在“外部”div元素上必须
mdl-js-layout 赋予布局基本的MDL行为 在“外部”div元素上必须
mdl-layout__header 定义容器作为MDL组件 在header元素上必须
mdl-layout-icon 用于添加一个应用图标,当两者都可见时由菜单图标隐藏 放在可选图标元素上
mdl-layout__header-row 定义容器作为MDL header行 在header容器div上必须
mdl-layout__title 定义布局标题文本 在布局标题span上必须
mdl-layout-spacer 用于对齐header或抽屉中的元素,通过增长来填充剩余的空间,长用于对齐元素到右侧 放在布局标题后的div上
mdl-navigation 定义容器作为MDL 导航组 在nav元素上必须
mdl-navigation__link 定义锚点作为MDL 导航链接 在header和/或抽屉菜单中的锚点元素上必须
mdl-layout__drawer 定义容器作为MDL布局抽屉 在抽屉div元素上必须
mdl-layout__content 定义容器作为MDL布局内容 在main元素上必须
mdl-layout__header--scroll 使header和内容一起滚动 可选,放在header元素上
mdl-layout--fixed-drawer 使抽屉菜单在大屏幕中保持可见和打开 可选,放在“外部”div元素上(不是抽屉div元素)
mdl-layout--fixed-header 使header一直可见,即使在小屏幕上 可选,放在outer div元素上
mdl-layout--large-screen-only 在小屏幕上隐藏一个元素 可选,放在 mdl-layout的任意后裔元素上
mdl-layout--small-screen-only 在大屏幕上隐藏一个元素 可选,放在 mdl-layout的任意后裔元素上
mdl-layout__header--waterfall 允许多行header线的瀑布效果 可选,放在header元素上
mdl-layout__header--transparent 使header透明,在头部使用布局的背景 可选,放在header元素上
mdl-layout__header--seamed 使header无阴影 可选,放在header元素上
mdl-layout__tab-bar 定义容器作为MDL tab 块 在header内的div元素上必须(tabbed布局)
mdl-layout__tab 定义锚点作为MDL tab 链接 在tab块 锚点元素上必须
is-active 定义tab作为默认激活的tab 可选,放在tab 块锚点元素和相关tab section元素
mdl-layout__tab-panel 定义容器作为tab内容盘 在tab section元素上必须
mdl-layout--fixed-tabs 使用固定的tab代替默认的滚动条 可选,放在“外部”div 元素上(不是header内部div上)

栅格

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
4
2
6 (8 tablet)
4 (6 tablet)
2 (4 phone)
Responsive grid
<div class="mdl-grid">
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      <div class="mdl-cell mdl-cell--1-col">1</div>
      </div>
      <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">4</div>
      <div class="mdl-cell mdl-cell--4-col">4</div>
      <div class="mdl-cell mdl-cell--4-col">4</div>
      </div>
      <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col">6</div>
      <div class="mdl-cell mdl-cell--4-col">4</div>
      <div class="mdl-cell mdl-cell--2-col">2</div>
      </div>
      <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
      <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
      <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
      </div>
    
<style>.mdl-cell { box-sizing: border-box; background-color: #BDBDBD; height: 200px; padding-left: 8px; padding-top: 4px; color: white; } .mdl-grid:first-of-type .mdl-cell { height: 50px; } </style>

介绍

Material Design Lite (MDL) 栅格 组件是为多种屏幕尺寸布局的简便方法。它减少了在多种显示条件下正确显示内容快需要的通常的编码负担。

MDL栅格通过一个容器元素定义和包围。网格在桌面屏幕尺寸下有12列,平板尺寸中有8列,电话尺寸中有4列,每个尺寸都有预定义的编剧和装订线。单元按照他们定义顺序进行排成一列的布局,但也有一些例外:

  • 如果一个单元格不能实行屏幕尺寸中的一行,它就会流入到下面的一行
  • 如果一个单元格格有大于或等于当前屏幕尺寸列数的指定列数,它将占用一行的全部

您可以设置最大网格宽度,在此之后,网格保持居中并填充两边,通过设置CSS max-width 属性。

网格在多数用户界面中是一个相对新颖而并非标准的功能,并为用户提供途径查看组织后的内容,否则内容可能很难理解或保留。因此,他们的设计和使用是在整体用户体验的一个重要因素。

包含一个 MDL 栅格 组件:

 1. 编码一个 <div> 元素,作为“外部”容器,用来保存全部的网格单元,按照期望的给它样式(颜色,字体大小等)。

<div>
  </div>

 2. 给这个div的 class 属性添加 mdl-grid 的MDL class

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

 3. 为每一个单元格编码一个“内部”div,包含用于显示的文本。

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

 4. 给“内部”div们的 class 属性添加 mdl-cell 的class和 mdl-cell--COLUMN-col 的class,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 的class,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 class 可以应用多种预定义视觉效果和行为增强到栅格上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-grid 定义容器作为MDL栅格组件 在“外部”div元素上必须
mdl-cell 定义容器作为MDL 单元格 在“内部”div元素上必须
mdl-grid--no-spacing 修改单元格使他们没有间距 可选,放在网格容器上
mdl-cell--N-col 设置单元格占N列 N在1-12之间,默认为4,在“内部” div元素上可选
mdl-cell--N-col-desktop 只在桌面模式设置单元格占N列 N在1-12之间,在“内部”div元素上可选
mdl-cell--N-col-tablet 只在平板模式设置单元格站N列 N在1-8之间,在“内部” div元素上可选
mdl-cell--N-col-phone 只在手机模式设置单元格站N列 N在1-4之间,在“内部” div元素上可选
mdl-cell--hide-desktop 在桌面模式下隐藏单元格 可选,放在“内部” div上
mdl-cell--hide-tablet 在平板模式下隐藏单元格 可选,放在“内部” div上
mdl-cell--hide-phone 在手机模式下隐藏单元格 可选,放在“内部” div上
mdl-cell--stretch 垂直拉伸单元格以适应父辈 默认,放在“内部” div上
mdl-cell--top 和父元素顶部对齐 可选,放在“内部” div上
mdl-cell--middle 和父元素中间对齐 可选,放在“内部” div上
mdl-cell--bottom 和父元素底部对齐 可选,放在“内部” div上

Tabs

  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys
Content tabs
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      <div class="mdl-tabs__tab-bar">
      <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
      <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
      <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
      </div>

      <div class="mdl-tabs__panel is-active" id="starks-panel">
      <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
      <li>Sansa</li>
      <li>Brandon</li>
      <li>Arya</li>
      <li>Rickon</li>
      </ul>
      </div>
      <div class="mdl-tabs__panel" id="lannisters-panel">
      <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jamie</li>
      <li>Tyrion</li>
      </ul>
      </div>
      <div class="mdl-tabs__panel" id="targaryens-panel">
      <ul>
      <li>Viserys</li>
      <li>Daenerys</li>
      </ul>
      </div>
      </div>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) tab 组件是这样的一个用户界面元素,它允许不同的内容块通过一种相互排斥的方式来分享同样的屏幕空间。 Tabs通常两个或多个一组的呈现,并且他们可以很容易的探索和切换应用程序的不同视图和功能, 或单独地浏览分类的数据集。Tabs为各自的内容充当“标题”;活动标签 - 指其内容是当前显示的 - 总是在视觉上与其他区别开来,使用户知道当前内容属于哪个标题。

Tabs在用户界面是一种成熟的,但非标准化的功能,并允许用户查看不同,但通常相关的内容块(通常称为面板)。Tabs节省屏幕空间,并提供了直观性和逻辑性来访问数据, 同时降低用户混淆导航和相关内容。他们的设计和使用是在整体用户体验的一个重要因素。查看Tabs组件的 Material Design specifications page 获取详细信息。

包含一个MDL tab 组件:

 1. 编码一个 <div> 元素,这是“外部”div,用于包含全部的tabs和他们的内容

<div>
  </div>

 2. 在“外部” div内,为tabs本身编码一个“内部”div,以及每个tab的内容各有一个,都作为子元素。这里,有三个内容的tabs,可以编码4个“内部” div。

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

 3. 在第一个“内部”div(tabs)内,为每一个tab编码一个锚点元素 <a> (链接)。包含 href 属性,值需要与tabs的 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. 添加一个或多个MDL class,用空格分隔,到outer和inner的 class 属性上。确认在想默认显示的tab上添加了 is-active 的class。

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

Tabs组件已经就绪了

实例

三个tabs,在tab链接上有墨水扩散效果

<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.
  </div>
  <div class="mdl-tabs__panel" id="members-panel">
  <p>The Beatles' members were:
  <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 class 可以应用多种预定义视觉效果和行为增强到 tabs上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-tabs 定义tabs容器作为MDL组件 在“外部”div元素上必须
mdl-js-tabs 赋予tabs容器基本的MDL行为 在“外部”div元素上必须
mdl-js-ripple-effect 应用墨水扩散的点击效果到tab链接上 可选,放在“外部”div元素上
mdl-tabs__tab-bar 定义容器作为MDL tabs链接栏 在第一个“内部”div元素上必须
mdl-tabs__tab 定义一个锚点(链接)作为MDL tab激活 在第一个“内部”div元素的所有链接上必须
is-active 定义一个锚点(链接)作为MDL tab激活 在“内部”div(tab)上的一个(并只能有一个)上必须
mdl-tabs__panel 定义一个容器作为tab内容 在每一个“内部” div(tab)上必须

Footer

<footer class="mdl-mega-footer">
      <div class="mdl-mega-footer__middle-section">

      <div class="mdl-mega-footer__drop-down-section">
      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
      <h1 class="mdl-mega-footer__heading">Features</h1>
      <ul class="mdl-mega-footer__link-list">
      <li><a href="#">About</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Partners</a></li>
      <li><a href="#">Updates</a></li>
      </ul>
      </div>

      <div class="mdl-mega-footer__drop-down-section">
      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
      <h1 class="mdl-mega-footer__heading">Details</h1>
      <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Specs</a></li>
      <li><a href="#">Tools</a></li>
      <li><a href="#">Resources</a></li>
      </ul>
      </div>

      <div class="mdl-mega-footer__drop-down-section">
      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
      <h1 class="mdl-mega-footer__heading">Technology</h1>
      <ul class="mdl-mega-footer__link-list">
      <li><a href="#">How it works</a></li>
      <li><a href="#">Patterns</a></li>
      <li><a href="#">Usage</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contracts</a></li>
      </ul>
      </div>

      <div class="mdl-mega-footer__drop-down-section">
      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
      <h1 class="mdl-mega-footer__heading">FAQ</h1>
      <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Questions</a></li>
      <li><a href="#">Answers</a></li>
      <li><a href="#">Contact us</a></li>
      </ul>
      </div>

      </div>

      <div class="mdl-mega-footer__bottom-section">
      <div class="mdl-logo">Title</div>
      <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy & Terms</a></li>
      </ul>
      </div>

      </footer>
    
<style></style>
Mini footer
<footer class="mdl-mini-footer">
      <div class="mdl-mini-footer__left-section">
      <div class="mdl-logo">Title</div>
      <ul class="mdl-mini-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy & Terms</a></li>
      </ul>
      </div>
      </footer>
    
<style></style>

介绍

Material Design Lite (MDL) footer 组件是一个全面的容器为了相关大量内容提供一个有视觉吸引力和直观逻辑的位置。尽管它被称为‘footer’,但它可以放置在设备屏幕的任何合适位置,无论是其他内容之前还是之后。

MDL footer组件有两种基本形式:大型页脚和迷你页脚。顾名思义,大型页脚比迷你页脚包含多(更复杂)的内容。大型页脚显示由水平线分开的多个内容部分,而迷你页脚呈现一个单一的内容部分。两种页脚形式具有其自己的内部结构,包括必需的和可选的元素,并且典型地包括信息性和可点击内容,如链接。

页脚,由该组件为代表,是在用户界面中一个相当新的功能,并允许用户查看一个连贯的,一致的方式组织内容的离散模块。他们的设计和使用是在整体用户体验的一个重要因素。

 1a. 编码一个 <footer> 元素,在footer内,为每个内容部分编码一个 <div> 元素,通常有三种:顶部,中部和底部。

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

 1b. 为footer和div的 class 属性添加合适的MDL class值。

<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. 在top部分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. 为两个inner div的 class 属性添加合适的MDL class值。

<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. 为这两个下拉div的 class 属性添加合适的MDL class值。

<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. 为inner标题div和无序列表的 class 属性添加合适的MDL class值。

<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. 向footer的头部中部底部部分添加内容,并为他们的 class 属性包含恰当的MDL class

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

 1a. 编码一个 <footer> 元素。在footer内部,编码两个 <div> 元素,一个是 左边 部分另一个是 右边 部分。

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

 1b. 添加适当的MDL class到 footer 和div的 class属性。

<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. 添加合适的 MDL 的class到“内部”div和列表的 class属性上。

<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.添加内容到footer的左边 (文字和链接) 和右边 (文字 或 装饰) 部分;在 class 属性上包含任何合适的MDL class。

<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 class 可以应用多种预定义视觉效果和行为增强到页脚上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-mega-footer 定义容器作为 MDL 大型页脚组件 在footer元素上必须
mdl-mega-footer__top-section 定义容器作为页脚顶部部分 在顶部部分“外部”div元素上必须
mdl-mega-footer__left-section 定义容器作为左部部分 在左部部分“内部”div元素上必须
mdl-mega-footer__social-btn 在大型页脚内定义装饰部分 在button元素(如果使用)必须
mdl-mega-footer__right-section 定义容器作为右部部分 在右部部分“内部”div元素上必须
mdl-mega-footer__middle-section 定义容器作为页脚中部部分 在中部部分“外部”div元素上必须
mdl-mega-footer__drop-down-section 定义容器作为下拉(垂直)内容区域 在下拉“内部”div元素上必须
mdl-mega-footer__heading 定义头部作为大型页脚的顶部 在下拉部分的h1元素上必须
mdl-mega-footer__link-list 定义无序列表作为下拉(垂直)列表 在下拉部分的内的ul元素上必须
mdl-mega-footer__bottom-section 定义容器作为页脚底部部分 在底部部分“外部”div元素上必须
mdl-logo 定义一个容器作为样式化的部分头部 在大型页脚底部部分或者迷你页脚左边部分的“内部”div上必须
mdl-mini-footer 定义容器作为MDL 迷你页脚组件 在footer元素上必须
mdl-mini-footer__left-section 定义容器作为左边部分 在左部部分“内部”div元素上必须
mdl-mini-footer__link-list 定义一个无序列表作为行内(水平)列表 在与“mdl-logo”div元素平辈的ul元素上必须
mdl-mini-footer__right-section 定义容器作为右边部分 在右部部分“内部”div元素上必须
mdl-mini-footer__social-btn 在迷你页脚内定义一个装饰区域 在button元素(如果使用)上必须

加载动画

指示加载和进度的状态

Progress bar

Default
<!-- Simple MDL Progress Bar -->
      <div id="p1" class="mdl-progress mdl-js-progress"></div>
      <script>
      document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
      this.MaterialProgress.setProgress(44);
      });
      </script>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Indeterminate
<!-- MDL Progress Bar with Indeterminate Progress -->
      <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Buffering
<!-- MDL Progress Bar with Buffering -->
      <div id="p3" class="mdl-progress mdl-js-progress"></div>
      <script>
      document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
      this.MaterialProgress.setProgress(33);
      this.MaterialProgress.setBuffer(87);
      });
      </script>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 进度条 组件是网页或网页应用后台活动的视觉指示器。进度指示器通常包含一个水平条,水平条含有一些能传达运动感的动画。 尽管有些进度条工具可以指示操作完成的近似或特定的百分比,MDL 进度条组件只简单传达一个事实,即一个活动正在进行,尚未完成。

进度指示器在用户界面中是有必要但非标准的功能,并为用户提供了应用程序状态的视觉提示。它们的设计和使用是在整体用户体验中的一个重要因素。 查看进度条组件的Material Design specifications page 获取详细信息。

包含一个 MDL 进度条 组件:

 1. 编码一个 <div> 元素。包含任何期望的属性和值,如id或者width---通常是使用外部css而不是像这里展示的这样使用 style 属性。

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

 2. 2. 添加一个或多个MDL class,用空格分隔,到div元素的 class 属性上。

<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 class 可以应用多种预定义视觉效果和行为增强到 进度指示器上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-js-progress 给进度指示器赋予基本的MDL行为 必须
mdl-progress__indeterminate 应用动画效果 可选

旋转动画

Default
Single color
<!-- MDL Spinner Component -->
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
    
<style></style>
<!-- MDL Spinner Component with Single Color --> <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 旋转动画 组件是一个经典的“等待光标”(在不同软件和硬件版本中有显著变化)增强的替代,并表示有一个持续过程,结果还不可用。 一个旋转动画包含一个开放的圆,在顺时针动画时会改变颜色,并明确传达一个进程已经开始但尚未完成。

旋转动画本身不执行操作,无论是它的显示还是用户点击或触摸它,并且不表明一个进程的具体进展或完成程度。MDL 旋转动画组件提供了多种类型,并允许您添加显示效果。

旋转动画在用户界面中是一个比较新颖的功能,并为用户提供关于正在进行的活动一致的视觉提示,无视硬件设备,操作系统或浏览器等环境。它们的设计和使用是在整体用户体验中的一个重要因素。

包含一个 MDL 旋转动画 组件:

 1. 编码一个元素,如 <div>, <p>, 或 <span>,用来包含旋转动画,该元素本身不应包含任何内容。

<div></div>

 2. 添加一个或多个MDL class,用空格分隔,到容器的 class 属性上。

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

旋转动画组件已经就绪了。

实例

一个在div上的默认旋转动画

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

一个在p元素上的单颜色旋转动画

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

配置选项

MDL 的CSS class 可以应用多种预定义视觉效果和行为增强到旋转动画上,下边表格列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-spinner 定义容器作为MDL旋转动画组件 必须
mdl-js-spinner 给旋转动画赋予基本的MDL行为 必须
is-active 使旋转动画可见并动画 可选
mdl-spinner--single-color 使用单一(主色调)颜色替代不断变化的颜色 可选

Note:并没有旋转动画的disabled版本,存在或不存在 is-active 这个class决定了旋转动画的可见性。例如,旋转动画是无效和不显示的:<div class="mdl-spinner mdl-js-spinner"></div>。 这个属性可以通过脚本程序来添加或移除。

滑块

从一个范围内选择值。

Default slider
Starting value
<!-- Default Slider -->
      <input class="mdl-slider mdl-js-slider" type="range"
      min="0" max="100" value="0" tabindex="0">
    
<style></style>
<!-- Slider with Starting Value --> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0">
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 滑块组件是最新HTML5 <input type="range"> 元素的增强版本。slider有一个水平线上边有一个小的可滑动的盘(手指),通常还有一段文字可以清楚传达当拖动它时将会设置的值。

滑块在用户界面中是一个比较新颖的功能,允许用户通过在范围内移动拇指选择预定范围内的值(向左是较低的值,向右驶较高的值)。 它们的设计和使用是在整体用户体验中的一个重要因素。 查看滑块组件的 Material Design specifications page 获取详细信息。

增强版的滑块组件可以在初始化时或通过编程来禁用。

包含一个 MDL 滑块 组件:

 1. 编码一个 <p> 段落元素并按预期的给它样式,添加一个css width 属性(通过行内或css class都可以),它将决定slider的尺寸。

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

 2. 在段落容器内,编码一个 <input> 元素并给它一个 type 属性,值为 "range"。同时给它一个 id 属性,这样可以通过脚本控制它,还有 minmax 属性来指定他的值得范围。给它一个 value 属性,他的值将决定滑动盘的初始位置(可选,默认是最大值的50%)。以及一个 step 属性,它的值指定滑动盘的增量(同样可选,默认为1)。最后给它一个事件在用户改变值时执行。

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

 3. 3. 添加一个或多个MDL class,用空格分隔,到slider的 class 属性上。

<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 class 可以应用多种预定义视觉效果和行为增强到滑块上,下边表格列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-slider 定义input作为一个MDL组件 必须
mdl-js-slider 赋予input基本的MDL行为 必须

Note: 滑块有提供一个禁用版本,通过标准的HTML布尔型属性 disabled来调用。<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled>。这个属性可以通过脚本程序来添加或移除。

Note: 尽管slider的value属性用来设置slider的初始值,但他不应该通过编程来修改; 替代性的,使用MDL的 change() 方法。 例如,假设slider1是一个slider对象,newvaluer是一个包含期望值的变量,不要使用 slider1.value = newvalue,而是用 slider1.MaterialSlider.change(newvalue)

许可证

谷歌保留所有权,2015,基于Apache-2许可证。

选择控制器

在状态间选择

复选框

Check on
Check off
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
      <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
      <span class="mdl-checkbox__label">Checkbox</span>
      </label>
    
<style></style>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2"> <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input"> <span class="mdl-checkbox__label">Checkbox</span> </label>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 复选框 组件是标准的 HTML <input type="checkbox"> 元素的增强版本。一个复选框由一个小方块和文本组成,通常情况下,明确传达了一个用户点击或触摸时可以设置或取消的二元状态。复选框通常但不一定会成组的出现,并且个别可以被选择和取消选择。MDL 复选框组件允许你添加显示和单击效果。

是多数的用户界面的一个常见功能,无论一个网站的内容或功能。它们的设计和使用是在整体用户体验中的一个重要因素。 查看复选框组件的Material Design specifications page获取详细信息。

增强版的checkbox比标准的复选框具有更加生动的视觉效果,并且可以在初始化时或通过编程来禁用。

包含一个MDL复选框组件

 1. 编码一个 <label> 元素并给它一个 for 属性,属性值需要与checkbox将包含的id值相同。当 <input> 包含在 <label> 标签内时,for属性是可选的,但为了清晰我们推荐加上它。

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

 2. 在label元素内,编码一个 <input> 元素,它的 type 值为 "checkbox",同时给它一个 id 属性,值与前边的 for 属性相同。

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

 3. 3. 同样是在label内,复选框后边,编码一个 <span> 元素来包含复选框的文字说明。

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

 4. 4. 添加一个或多个MDL class,用空格分隔,到label,checkbox,span的 class 属性上。.

<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 class 可以应用多种预定义视觉效果和行为增强到复选框上,下边列表列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-checkbox 定义一个label作为MDL组件 在label元素上必须
mdl-js-checkbox 赋予label基本MDL行为 在label元素上必须
mdl-checkbox__input 赋予复选框基本MDL行为 在input标签上必需(checkbox)
mdl-checkbox__label 赋予 说明文本 基本MDL行为 在span标签上必需(说明)
mdl-js-ripple-effect 应用墨水扩散的点击效果 可选,放到label元素上,而不是input元素

Note: 所有可用的复选框类型都有禁用版,通过标准的HTML布尔型属性disabled来调用,这个属性可以通过脚本程序来添加或移除

单选按钮

Radio on
Radio off
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
      <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
      <span class="mdl-radio__label">First</span>
      </label>
    
<style></style>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2"> <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2"> <span class="mdl-radio__label">Second</span> </label>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 单选按钮 组件 是标准的 HTML <input type="radio"> 元素或 ‘radio 按钮’ 的增强版本。 一个单选框包含一个小圆圈和文本,通常情况下,文本明确传达了一个用户点击或触摸时可以设置或取消的二元状态。单选按钮通过两个或更多的成组出现,虽然他们可以被单独的选中, 但只能通过选择一组中的其他单选按钮(这将取消一组内其他所有的单选按钮的选中状态)来取消选择。MDL单选按钮组件允许你添加显示和单击效果。

单选按钮是多数的用户界面的一个常见功能,无论一个网站的内容或功能。它们的设计和使用是在整体用户体验中的一个重要因素。 查看单选按钮组件的 Material Design specifications page 获取详细信息。

增强版的radio 比标准的单选选框具有更加生动的视觉效果,并且可以在初始化时或通过编程来禁用。

包含一个MDL 单选按钮 组件:

 1. 编码一个 <label> 元素并给它一个 for 属性,属性值需要与单选按钮将包含的id值相同。当<input> 元素包含在 <label> 元素内时, for 属性是可选的,但为了清晰我们推荐加上它。

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

 2. 在label元素内,编码一个 <input> 元素,它的 type 属性值为 "radio",同时给它一个 id 属性,值与前边的 for 属性相同。一个 name 属性来定义单选按钮所属的组。可选的,给它一个 value 属性,它的值用来提供关于此单选按钮的一些信息,可以给程序使用。

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

 3. 同样是在label内,单选按钮后边,编码一个 <span> 元素来包含单选按钮的文字说明。

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

 4. 添加一个或多个MDL class,用空格分隔,到label,radio,span的 class 属性上。

<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. 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 class 可以应用多种预定义视觉效果和行为增强到单选按钮上,下边列表列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-radio 定义label作为一个MDL组件 在label元素上必须
mdl-js-radio 赋予label基本的MDL行为 在label元素上必须
mdl-radio__button 赋予radio基本的MDL行为 在input元素上必须(单选按钮)
mdl-radio__label 赋予 说明文本 基本的MDL行为 在span元素上必须(说明文本)
mdl-js-ripple-effect 应用墨水扩散的点击效果 可选,放在label元素上,而不是input元素上

Note: D所有可用的单选按钮类型都有禁用版,通过标准的HTML布尔型属性disabled来调用,这个属性可以通过脚本程序来添加或移除

图标切换

Icon on
Icon off
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
      <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
      <i class="mdl-icon-toggle__label material-icons">format_bold</i>
      </label>
    
<style></style>
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2"> <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input"> <i class="mdl-icon-toggle__label material-icons">format_italic</i> </label>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 图标切换 组件是标准的 HTML <input type="checkbox"> 元素的增强本。一个图标切换包含一个用户定义的图标来进行说明,通过视觉上的高亮,用户通过点击或触摸来设置或取消设置它的二元状态,就像复选框。 图标切换可以单独或成组的使用,并且可以单独的选中或取消选中。

图标切换可以作为某些特别地复选框的替换。可以在用户界面中作为一个有价值的功能,而无论网站的内容或功能。 它们的设计和使用是在整体用户体验中的一个重要因素。 查看图标切换组件的 Material Design specifications page 获取详细信息。

图标切换比标准的复选框具有更加个性化的视觉效果,并且可以在初始化时或通过编程来禁用。

包含一个 MDL 图标切换 组件:

 1. 编码一个 <label> 元素并给它一个 for 属性,属性值需要与图标切换按钮将包含的id值相同。

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

 2. 在label元素内,编码一个 <input> 元素,它的 type 属性值等于 "checkbox",同时给它一个 id 属性,值与前边的 for 属性相同。

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

 3. 在label元素内,编码一个 <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. 添加一个或多个MDL class,用空格分隔,到label,input的 class 属性上。

<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 class 可以应用多种预定义视觉效果和行为增强到图标切换上,下边表格列出了所有可用的class和他们的效果。

MDL class 效果 标记
mdl-icon-toggle 定义label作为一个MDL组件 在label元素上必须
mdl-js-icon-toggle 赋予label基本的MDL行为 在label元素上必须
mdl-icon-toggle__input 赋予图标切换基本的MDL行为 在input元素上必须(图标切换按钮)
mdl-icon-toggle__label 赋予 说明文本 基本的MDL行为 在i元素上必须(icon)
mdl-js-ripple-effect 应用墨水扩散的点击效果 可选,放在label元素上,而不是input元素上

Note: 所有可用的checkbox类型都有提供禁用版,通过标准的HTML布尔型属性 disabled来调用。 <input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled>,这个属性可以通过脚本程序来添加或移除。

切换开关

Switch on
Switch off
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
      <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
      <span class="mdl-switch__label"></span>
      </label>
    
<style></style>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2"> <input type="checkbox" id="switch-2" class="mdl-switch__input"> <span class="mdl-switch__label"></span> </label>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 切换开关 组件是标准HTML <input type="checkbox"> 元素的增强版本。切换开关有一个带突出的圆形状态指示灯的短横“轨道”,通常还有一段文字可以清楚传达当用户点击或触摸它可以设定或取消的二元状态,类似于复选框。 切换开关可以单独或成组的使用,并且可以单独的选中或取消选中。然而,切换开关提供的状态有更直观的视觉表现:左/灰色代表关,右/彩色代表开。MDL 切换开关组件允许增加显示和点击效果。

Switches可以作为某些特别地复选框的替换。可以在用户界面中作为一个有价值的功能,而无论网站的内容或功能。它们的设计和使用是在整体用户体验中的一个重要因素。 查看 切换开关组件的 Material Design specifications page 获取详细信息。

增强版的切换开关比标准的复选框具有更加个性化的视觉效果,并且可以在初始化时或通过编程来禁用。

包含一个 MDL 切换开关 组件:

 1. 编码一个 <label> 元素并给它一个 for 属性,属性值需要与图标切换按钮将包含的id值相同。

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

 2. 在label元素内,编码一个 <input> 元素,它的 type 属性值等于 "checkbox",同时给它一个 id 属性,值与前边的 for 属性相同。

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

 3. 同样是在label内,复选框后边,编码一个 <span> 元素来包含复选框的文字说明。

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

 4. 添加一个或多个MDL class,用空格分隔,到label,input和说明文本的 class 属性上。

<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 class 可以应用多种预定义视觉效果和行为增强到切换开关上,下边表格列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-switch 定义label作为一个MDL组件 在label元素上必须
mdl-js-switch 赋予label基本的MDL行为 在label元素上必须
mdl-switch__input 赋予切换开关基本的MDL行为 在input元素上必须(切换开关)
mdl-switch__label 赋予 说明文本 基本的MDL行为 在span元素上必须(说明文本)
mdl-js-ripple-effect 应用墨水扩散的点击效果 可选,放在label元素上,而不是input元素上

Note: 所有可用切换开关类型都有提供禁用版,通过标准的HTML布尔型属性 disabled来调用。 <input type="checkbox" id="switch5" class="mdl-switch__input" disabled>。这个属性可以通过脚本程序来添加或移除。

表格

组织数据。

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35
Data table
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
      <thead>
      <tr>
      <th class="mdl-data-table__cell--non-numeric">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>25</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>$2.35</td>
      </tr>
      </tbody>
      </table>
    
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) data-table 组件是标准的 HTML <table>元素的增强版本。 data-table由格式良好的行和列组成,带有相应的用户交互能力。

列表在多数的用户界面中是一个常见功能,无论一个网站的内容或功能。它们的设计和使用是在整体用户体验中的一个重要因素。查看 data-table组件的 Material Design specifications page 获取详细信息。

在一个data-table中可用的行/列/单元格多数会自动格式化,也就是说,一旦定义好了data-table,各个单元格很少需要特别注意。 例如,鼠标悬停和选择的行会表现出阴影,数值默认情况下会自动格式化, 增加一个单一的class会使表的行单独地或多个地可被选择。这使得开发者方便且容易的编写data-table组件,对用户又是有吸引力的和直观的。

包含一个 MDL data-table 组件:

 1. 编码 <table> 元素,包含 <thead> 元素和 <tbody> 元素来分别保存标题行和数据行。

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

 2. 给table元素的class属性添加一个或多个MDL class, 用空格分隔。

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

 3. 3. 在 <thead> 里,只编写一个table行 <tr> ,每个单元格是一个表头 <th>, 为了确保适当的头对齐,把“non-numeric”这个MDL class 添加到纯文本的标题单元格(数据单元格会默认作为数字格式化)。

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

 4. 4. 在 <tbody>内,给每个数据行编写 <tr> ,并为行内每个数据单元编写 <td> ,把“non-numeric”这个MDL class添加到纯文本的单元格来保证对齐。

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

data-table组件已经就绪了。

实例

一个有全选/单选功能的data-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>

一个不包括选择框,全部是文本的data-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 class 可以应用多种预定义视觉效果和行为增强到data-table上,下边列表列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-data-table 定义一个table作为MDL组件 在table元素上必须
mdl-js-data-table 赋予table基本的MDL行为 在table元素上必须
mdl-data-table--selectable 应用全选/取消的选择框行为 可选,放到table元素上
mdl-data-table__cell--non-numeric 应用文本格式化到数据单元格 可选,需要在table头部和单元格内放置
(none) 应用数字格式化到头部和数据单元(默认)

文本框

文本输入组件。

Input is not a number!
Text
Numeric
<!-- Simple Textfield -->
      <form action="#">
      <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input" type="text" id="sample1">
      <label class="mdl-textfield__label" for="sample1">Text...</label>
      </div>
      </form>
    
<style></style>
<!-- Numeric Textfield --> <form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2"> <label class="mdl-textfield__label" for="sample2">Number...</label> <span class="mdl-textfield__error">Input is not a number!</span> </div> </form>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Input is not a number!
Text with floating label
Numeric with floating label
<!-- Textfield with Floating Label -->

      <form action="#">
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="sample3">
      <label class="mdl-textfield__label" for="sample3">Text...</label>
      </div>
      </form>
    
<style></style>
<!-- Numeric Textfield with Floating Label --> <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4"> <label class="mdl-textfield__label" for="sample4">Number...</label> <span class="mdl-textfield__error">Input is not a number!</span> </div> </form>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
Multiple line
Expanding
<!-- Floating Multiline Textfield -->
      <form action="#">
      <div class="mdl-textfield mdl-js-textfield">
      <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
      <label class="mdl-textfield__label" for="sample5">Text lines...</label>
      </div>
      </form>
    
<style></style>
<!-- Expandable Textfield --> <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="sample6"> <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label> </div> </div> </form>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 文本框 组件是标准的 HTML <input type="text"> and <input type="textarea"> 元素的增强版本。文本框包含一条水平线表示在这里输入键盘可以出现,通常其中的文本可以明确表达该文本框预期的内容。MDL 文本框组件提供多种类型的文本字段,并允许您添加显示和点击效果。

文本框在多数的用户界面中是一个常见的特性,无论一个网站的内容或功能。 它们的设计和使用是在整体用户体验中的一个重要因素。 查看文本框组件的 Material Design specifications page 获取详细信息。

增强的文本框组件有比标准的文本框更生动的视觉效果,并可以初始时或以编程方式 禁用。 文本框组件主要有三种类型的的文本框,每个都有自己的基本编码的要求。类型分别是 单行的多行的,和可扩展的

包含一个单行的MDL 文本框组件:

 1. 编码一个 <div> 元素来包含文本框。

<div>
  ...
  </div>

 2. 在div内部,编码一个 <input> 元素,包含之值为 type"text" 属性,一个你选择值得 id 标签。

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

 3. 还是在div内部,输入框后,编码一个 <label> 元素, 包含一个 for 标签,值需要与你的 inputid 值相符。。以及一个作为输入框内placeholder的简短文本。

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

 4. 可选的,给 <input> 元素添加一个 pattern 属性及值(查看 W3C HTML5 forms specification 获取详细),在 <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. 添加一个或多个MDL class ,空格分隔,到div容器,输入框,框标签,及错误信息的class属性中。

<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> 元素,包含值为 "text"type 属性(多行文本框),一个你选择值得 id 属性,一个 rows 属性值为 "1" (这个属性设定了同时可见的输入行数)。

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

 3. 还是在div内部,输入框后,编写一个 <label> 元素,包含一个 for 属性,值需要与你的 <textarea>id 值相符。以及一个作为输入框内placeholder的简短文本。

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

 4. 添加一个或多个MDL class ,空格分隔,到div容器,输入框,框标签,及错误信息的class属性中。

<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. 3. 在label内部,编码一个 <span> 元素,这个 <span> 应当是空的,而且应当是label的唯一内容。这个元素将用来包含可扩展文本框的图标。

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

 4. 4. 在’外部‘div内,label后边,编写一个’内部’(嵌套) <div> 元素。

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

 5. 在这个‘内部’div内,编写一个 <input> 元素,包含一个值为 "text"type 属性,包含一个 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步编写)。以及一个作为输入框内placeholder的简短文本。

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

 7. 添加一个或多个MDL class ,空格分隔,到‘外部’div容器,标签,以及‘内部’div容器,输入框,框标签的class属性中。

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

多行文本框已经就绪了,它在icon(空 <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 class 可以应用多种预定义视觉效果和行为增强到文本框上,下边列表列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-textfield 定义一个容器作为MDL组件 在'外部'div元素上必须
mdl-js-textfield 给输入框赋予基本MDL行为 在'外部'div元素上必须
mdl-textfield__input 定义元素作为文本框框 在input或textarea元素上必须
mdl-textfield__label 定义元素作为文本框标签 在属于input或textarea的 label 元素上必须
mdl-textfield--floating-label 应用浮动标签效果 可选,放在'外部'div元素上
mdl-textfield__error 定义一个span作为MDL错误信息 可选,需要和MDL输入框元素的pattern标签相对应
mdl-textfield--expandable 定义一个div作为MDL可扩展输入框的容器 对于可扩展的输入框,在'外部'div上必须
mdl-button 定义一个标签作为MDL图标按钮 对于可扩展的输入框,在'外部'div上必须
mdl-js-button 给图标按钮的容器赋予基本MDL行为 对于可扩展的输入框,在'外部'div的label上必须
mdl-button--icon 定义一个label作为图标容器 对于可扩展的输入框,在'外部'div的label上必须
mdl-input__expandable-holder 定义一个容器做 MDL 组件 对于可扩展的输入框,在'内部'div上必须
is-invalid 定义一个初始加载时即无效的文本框 可选,放在 mdl-textfield 元素上

(1) (1) 这里作为例子使用‘搜索’图标,通过修改文本可以使用其他的图标,相关可用的图标列表,请查看此页面

Note: 各类型文本框的disabled版本都有提供,可以通过标准的HTML布尔属性 disabled来调用。<input class="mdl-textfield mdl-js-textfield" type="text" disabled>。这个属性可以通过脚本程序来添加或移除。

工具提示

悬停时显示有用的信息。

add
Follow
print
Print
Simple
Large
<!-- Simple Tooltip -->
      <div id="tt1" class="icon material-icons">add</div>
      <div class="mdl-tooltip" for="tt1">
      Follow
      </div>
    
<style></style>
<!-- Large Tooltip --> <div id="tt2" class="icon material-icons">print</div> <div class="mdl-tooltip mdl-tooltip--large" for="tt2"> Print </div>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>
cloud_upload
Upload file.zip
share
Share your content
via social media
Rich
Multiple lines
<!-- Rich Tooltip -->
      <div id="tt3" class="icon material-icons">cloud_upload</div>
      <div class="mdl-tooltip" for="tt3">
      Upload <strong>file.zip</strong>
      </div>
    
<style></style>
<!-- Multiline Tooltip --> <div id="tt4" class="icon material-icons">share</div> <div class="mdl-tooltip" for="tt4"> Share your content<br>via social media </div>
<style></style>
<style> body { padding: 20px; background: #fafafa; position: relative; } </style>

介绍

Material Design Lite (MDL) 工具提示 组件是标准HTML提示工具(如 title 属性提供的)的增强版本。工具提示包含可以清楚传达与元素相关的附加信息的文本和/或图像,当用户将鼠标悬停在元素上时或者触摸式界面中触摸元素时展示。MDL工具提示组件通过预定义风格(颜色,字体等设置包含在material.min.css)提供一个生动,有吸引力的视觉元素来显示相关但通常非必要内容,比如,一个定义,解释,或简短的指令。

tooltip是多数用户界面里的常见的特性,无论网站的内容或功能。它们的设计和使用是整体用户体验中的一个重要因素。 查看工具提示组件的 Material Design specifications page 获取详细信息。

包含一个MDL 工具提示 组件:

 1. 编码一个元素,如 <div>, <p>, 或 <span> ,并给它期望的样式;它将作为tooltip的目标,包含一个有唯一值的 id 属性来链接到它的工具提示容器。

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

 2. 接着目标元素,编码第二个元素,如<div>, <p>, 或 <span>;它将作为tooltip本身,包含一个 for 属性,属性值需要与目标元素的 id 值对应。

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

 3. 给工具提示元素 class 属性添加一个或多个MDL class值,用空格分隔。

<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 class 可以应用多种预定义视觉增强效果到工具提示上,下边table列出了所有可用的class和他们的效果。

MDL class 效果 备注
mdl-tooltip 定义一个容器作为MDL 工具提示 在工具提示容器元素上必需
mdl-tooltip--large 应用大字体效果 可选,添加到工具提示容器元素上
Download Kit