1.导航布局
1.1.介绍
Material Design Lite（MDL）布局组件是一种全面的页面布局方法，它使用MDL开发原则，允许高效使用MDL组件，并自动适应不同的浏览器，屏幕大小和设备。
无论站点的内容或功能如何，适当和易于访问的布局都是所有用户界面的关键特征。页面设计和展示因此是整体用户体验的重要因素。有关详细信息，请参阅布局组件的材料设计规范页面。
使用MDL布局原则通过提供可重用组件，并通过建立可识别的视觉元素，遵守逻辑结构网格并在多个平台和屏幕大小之间保持适当的间距来鼓励环境间的一致性，从而简化了可伸缩页面的创建。 MDL布局非常强大和动态，可以在保持开发灵活性和易用性的同时保持外观和行为的一致性。
1.2.配置选项
| 类名 | 效果 | 其他 |
|---|---|---|
mdl-layout |
定义容器为MDL组件 | 最外层div必需 |
mdl-js-layout |
添加MDL组件布局行为 | 最外层div必需 |
mdl-layout__header |
定义布局容器中头部组件 | 头部元素必需 |
mdl-layout-icon |
添加布局图标 | 可选 |
mdl-layout__header-row |
定义头部内容容器样式 | 头部内容元素必需 |
mdl-layout__title |
头部标题样式 | 头部标题必需 |
mdl-layout-spacer |
空元素，用于对齐元素和填充空间 | 紧跟头部标题元素后面 |
mdl-navigation |
定义导航组 | nav标签中必需 |
mdl-navigation__link |
导航链接样式 | 作为锚点必需 |
mdl-layout__drawer |
定义容器为MDL抽屉组件 | 作为抽屉的div必需 |
mdl-layout__content |
定义布局容器的内容 | main元素中必需 |
mdl-layout__header--scroll |
设置头部跟随内容滚动 | 可选，在header元素中设置 |
mdl-layout--fixed-drawer |
抽屉导航栏总是展开状态 | 最外层div中选用 |
mdl-layout--fixed-header |
固定头部 | 最外层div中选用 |
mdl-layout--no-drawer-button |
不显示抽屉按钮 | 可选，跟在mdl-layout类后面 |
mdl-layout--no-desktop-drawer-button |
桌面模式下不现实抽屉按钮 | 可选，跟在mdl-layout类后面 |
mdl-layout--large-screen-only |
在小窗口隐藏元素 | 可选 |
mdl-layout--small-screen-only |
在较大窗口中隐藏元素 | 可选 |
mdl-layout__header--waterfall |
使用瀑布流式效果 | 可选 |
mdl-layout__header--waterfall-hide-top |
隐藏瀑布流式头部的顶部 | 可选，如果使用需要类 mdl-layout__header--waterfall |
mdl-layout__header--transparent |
头部背景透明 | 可选 |
mdl-layout__header--seamed |
头部无阴影效果 | 可选 |
mdl-layout__tab-bar |
定义容器为MDL选项卡 | 在header内部 |
mdl-layout__tab |
定义锚点 | 锚点元素必需类 |
is-active |
设置默认激活tab选项卡 | 可选 |
mdl-layout__tab-panel |
选项卡对应的内容面板 | section元素中使用 |
mdl-layout__tab-manual-switch |
点击选项卡禁止切换，用于自定义事件 | 可选 |
mdl-layout--fixed-tabs |
设置选项卡固定 | 可选 |
1.3.应用举例
<!-- 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>
2.栅格组件
2.1.介绍
Material Design Lite（MDL）网格组件是为多个屏幕大小布置内容的简化方法。它减少了在各种显示条件下正确显示内容块所需的通常编码负担。
MDL网格由容器元素定义并包围。网格的桌面屏幕尺寸为12列，平板电脑尺寸为8，手机尺寸为4，每种尺寸都有预定义的边距和排水沟。单元格按照它们定义的顺序依次排列，但有一些例外：
如果某个单元格不适合其中一个屏幕大小的行，则会流入下一行。
如果单元格的指定列大小等于或大于当前屏幕大小的列数，则它将占用其整行。
您可以设置最大网格宽度，在此之后，通过设置网格的最大宽度CSS属性，网格保持以任何一边的填充为中心。
网格在大多数用户界面中是一种相当新颖且非标准化的功能，并为用户提供了一种以有组织的方式查看内容的方式，否则这些内容可能难以理解或保留。
2.2.配置选项
| 类名 | 效果 | 其他 |
|---|---|---|
mdl-grid |
定义一个容器为MDL栅格组件 | 必需 |
mdl-cell |
定义一个容器为MDL栅格单元 | 栅格内元素单元必需类 |
mdl-grid--no-spacing |
设置栅格单元间的间距为0 | 可选类 |
mdl-cell--N-col |
设置单元格所占列数为N个 | N范围为1-12，默认为4，可选类 |
mdl-cell--N-col-desktop |
仅在桌面模式下设置单元格的列大小为N | N范围为1-12，可选类 |
mdl-cell--N-col-tablet |
仅在平板模式下设置单元格的列大小为N | N范围为1-8，可选类 |
mdl-cell--N-col-phone |
仅在手机端模式下设置单元格的列大小为N | N范围为1-4，可选类 |
mdl-cell--N-offset |
在单元格之前添加N列空白 | N的范围为1-11，可选类 |
mdl-cell--N-offset-desktop |
仅在桌面模式下在单元格前面添加N列空白 | N的范围为1-11，可选类 |
mdl-cell--N-offset-tablet |
仅在平板模式下在单元格前面添加N列空白 | N的范围为1-7，可选类 |
mdl-cell--N-offset-phone |
仅在手机端模式下在单元格前面添加N列空白 | N的范围为1-3，可选类 |
mdl-cell--order-N |
重新排列单元格到N位置 | N范围为1-12，可选类 |
mdl-cell--order-N-desktop |
仅在桌面模式下在单元格排列到N位置 | N的范围为1-12，可选类 |
mdl-cell--order-N-tablet |
仅在平板模式下在单元格排列到N位置 | N的范围为1-12，可选类 |
mdl-cell--order-N-phone |
仅在手机端模式下在单元格排列到N位置 | N的范围为1-12，可选类 |
mdl-cell--hide-desktop |
桌面模式下隐藏单元格 | 可选 |
mdl-cell--hide-tablet |
平板电脑模式下隐藏单元格 | 可选 |
mdl-cell--hide-phone |
手机端模式下隐藏单元格 | 可选 |
mdl-cell--stretch |
扩展单元格填充到父级 | 默认 |
mdl-cell--top |
将单元格与父级的顶部对齐 | 可选类 |
mdl-cell--middle |
将单元格与父级中间对齐 | 可选类 |
mdl-cell--bottom |
将单元格与父级底部对齐 | 可选类 |
2.3.应用举例
<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>
3.选项卡
3.1.介绍
Material Design Lite（MDL）选项卡组件是一个用户界面元素，它允许不同的内容块以互斥方式共享相同的屏幕空间。选项卡总是以两个或更多的集合呈现，并且可以轻松浏览和切换应用程序的不同视图或功能方面，或者单独浏览分类的数据集。标签用作各自内容的“标题”;活动标签 - 当前显示内容的那个标签 - 总是在视觉上与其他标签区分开来，以便用户知道当前内容属于哪个标题。选项卡是用户界面中已建立但非标准化的功能，并允许用户查看不同但经常相关的内容块（通常称为面板）。选项卡可节省屏幕空间，并提供直观和逻辑的数据访问，同时减少导航和相关的用户混淆。他们的设计和使用是整体用户体验的重要因素。
3.2.配置选项
| 类名 | 效果 | 其他 |
|---|---|---|
mdl-tabs |
定义容器为MDL选项卡组件 | 必需类 |
mdl-js-tabs |
设置tab选项卡的默认行为效果 | 必需类 |
mdl-js-ripple-effect |
添加点击选项卡波纹效果 | 可选类 |
mdl-tabs__tab-bar |
定义选项卡标题容器 | 必需类 |
mdl-tabs__tab |
定义选项卡标题样式 | 必需类 |
is-active |
设置激活状态下的选项卡标题样式 | 激活选项卡标题必需 |
mdl-tabs__panel |
定义选项卡的内容 | 选项卡内容必需 |
3.3.应用举例
<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>
4.页脚
4.1.介绍
Material Design Lite（MDL）页脚组件是一个综合容器，旨在在视觉吸引力和逻辑上直观的区域呈现大量相关内容。虽然它被称为“页脚”，但它可能会放在设备屏幕上的任何适当位置，无论是在其他内容之前还是之后。
MDL页脚组件采用两种基本形式：大型页脚和小型页脚。大型页脚比小型页脚包含更多（更复杂）的内容。一个大型页脚展现了由水平规则分隔的多个内容部分，而一个迷你页脚展现了一段内容。两个页脚形式都有自己的内部结构，包括必需元素和可选元素，并且通常包含信息和可点击内容（如链接）。
4.2.配置选项
| 类名 | 效果 | 其他 |
|---|---|---|
mdl-mega-footer |
定义容器为MDL页脚组件 | 必需类 |
mdl-mega-footer__top-section |
定义容器为页脚顶部内容 | 页脚顶部容器必需类 |
mdl-mega-footer__left-section |
定义容器为页脚左侧内容 | 页脚左侧容器必需类 |
mdl-mega-footer__social-btn |
装饰按钮 | 使用button按钮必需类 |
mdl-mega-footer__right-section |
定义容器为页脚右侧内容 | 页脚右侧容器必需类 |
mdl-mega-footer__middle-section |
定义容器为页脚中间内容 | 若使用则必需类 |
mdl-mega-footer__drop-down-section |
定义容器垂直下拉部分 | 下拉元素必需类 |
mdl-mega-footer__heading |
定义页脚标题 | h1元素必需类 |
mdl-mega-footer__link-list |
定义一个垂直下拉列表 | 使用ul元素必需类 |
mdl-mega-footer__bottom-section |
定义页脚底部内容区域 | 若使用则必需 |
mdl-logo |
定义样式标题容器 | 需要 mega-footer bottom-section 或者 mini-footer left-section |
mdl-mini-footer |
将容器定义为MDL迷你页脚容器组件 | 需要footer元素 |
mdl-mini-footer__left-section |
迷你页脚容器左侧部分 | 使用时必需类 |
mdl-mini-footer__link-list |
定义一个下拉列表 | 使用ul元素必需类 |
mdl-mini-footer__right-section |
定义一个容器右侧部分 | 使用时必需类 |
mdl-mini-footer__social-btn |
为迷你页脚设置装饰块 | 使用button标签必需类 |
4.3.应用举例
4.3.1.页脚
<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>
4.3.2.迷你页脚
<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>
