Material Design Lite组件之布局

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>