MDL容器组件

参考代码

1. 单行页脚/Mini footer

MDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息：

MDL容器组件

单行页脚同样采用flexbox布局，将整行分割为左右两种区域，并以空格填充剩余的行空间：

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">Left session</div>
    <div class="mdl-mini-footer--right-section">Right session</div>
</footer>

left-section总是向左边对齐，而right-section总是向右边对齐。单行页脚内可以放置多个left-section或right-section。

在每个区域内，MDL预定义了两种交互元素：链接和社交按钮。

链接/link-list样式应用在列表元素ul上，自动将列表成员水平排列：

<div class="mdl-mini-footer--left-section">
    <ul class="mdl-mini-footer--link-list">
        <li><a href="javascript:void(0)">Link 1</a></li>
        <li><a href="javascript:void(0)">Link 2</a></li>
        <li><a href="javascript:void(0)">Link 3</a></li>
    </ul>
</div>

社交按钮/social-btn样式将元素修饰为36px正方大小的容器，可以设置其背景图片来构造图标式按钮。

MDL容器组件

2. 多行页脚/Mega footer

MDL的多行页脚/Mega footer组件可以包含多个垂直排列的区域。当我们需要一个复杂的页脚区域来呈现信息及提供交互手段时，可以使用这个组件：

MDL容器组件

从上图容易看出，单行页脚/Mini footer组件相当于仅适用多行页脚/Mega footer 组件的bottom-section区域。

当声明为mdl-mega-footer--link-list样式的列表元素出现在drop-down-section 区域时，其列表项是垂直排列的。

MDL容器组件

3. 栅格/Grid

MDL的栅格/Grid组件是响应式的，可以适应不同屏幕分辨率的布局要求：

MDL容器组件

栅格/Grid组件根据屏幕尺寸大小，自动地分割行宽：

桌面（ > 840px） - 12个单元格
平板（ 480px ~ 840px）- 8个单元格
手机（ < 480px）- 4个单元格

可以使用mdl-cell--N-col样式声明单元格的宽度：

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

在不同的分辨率下，示例栅格将呈现如下：

MDL容器组件

如果我们希望在任何情况下，示例栅格总是显示为相同的列数，那么可以声明单元格在不同环境下的样式：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone"></div>
    <div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone"></div>
</div>

在同一行的各单元格，默认情况下总是拉伸/stretch其高度（采用同一行中最高单元格的高度），可以使用 mdl-cell--bottom样式使单元格不拉伸，并将底部对齐：

MDL容器组件

与之类似，mdl-cell--top使单元格顶部对齐，mdl-cell--middle使单元格居中对齐：

<div class="mdl-grid">
    <!--顶部对齐-->
    <div class="mdl-cell mdl-cell--top">...</div>
    <!--居中对齐-->
    <div class="mdl-cell mdl-cell--middle">...</div>
    <!--底部对齐-->
    <div class="mdl-cell mdl-cell--bottom">...</div>
</div>

MDL容器组件

4. 选项卡/Tabs

MDL的选项卡/Tabs组件用来在多个内容间进行切换：

MDL容器组件

选项卡/Tabs组件具有固定的HTML结构，由选项栏、选项面板等元素构成：

<!--1. 声明组件-->
<div class="mdl-tabs mdl-js-tabs">
    <!--2. 声明选项栏-->
    <div class="mdl-tabs__tab-bar">
        <!--2.1 声明选项，使用href属性指向选项面板，为要激活的选项应用is-active样式-->
        <a class="mdl-tabs__tab is-active" href="#panel-1">tab-1</a>
        <a class="mdl-tabs__tab" href="#panel-2">tab-2</a>
    </div>
    <!--3. 声明选项面板，使用id属性声明锚点 , 为要显示的面板应用is-active样式-->
    <div class="mdl-tabs__panel is-active" id="panel-1">...</div>
    <div class="mdl-tabs__panel" id="panel-2">...</div>
</div>

可以为组件元素应用mdl-js-ripple-effect样式，使点击时具有水纹动效。

MDL容器组件

5. 卡片/Cards

MDL的卡片/Card组件非常适合显示复杂的、包含多种类型信息的内容：

MDL容器组件

卡片通常具有固定的宽度，而高度则根据场景不同，可以固定，也可以变化。卡片是一种新型的界面元素，它为用户提供了通过单一访问点访问复杂信息的手段。

使用mdl-card样式类将外层元素声明为卡片组件，使用mdl-card__title等样式类将内层元素声明为标题、媒体、动作等容器：

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

卡片组件默认为330px宽，最小200px高，是一个主轴为竖向的flex容器。可以显式地设置其宽度和高度。

title、media、supporting-text和actions作为flex容器成员在垂直方向上依次排列，其高度是由内容决定，或者被显式地设定。例如，很多时候，我们希望给title区域增加背景图片以增强感染力，那么将照片设置为title区域的背景之后，还需要设置title区域的高度：

<div class="mdl-card">
    <div class="mdl-card__title" 
        style="background:url("img/bg.jpg") no-repeat;backgroud-size:cover;height:150px;">
        ...
    </div>
</div>

menu块被设置为绝对定位，总是居于卡片组件的右上角。

MDL容器组件