MDL容器组件

MDL容器组件

参考代码

1. 单行页脚/Mini footer

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

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

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

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

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


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

2. 多行页脚/Mega footer

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

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

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

3. 栅格/Grid

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

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

  • 桌面( > 840px) - 12个单元格

  • 平板( 480px ~ 840px)- 8个单元格

  • 手机( < 480px)- 4个单元格

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

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

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

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

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

...
...
...

4. 选项卡/Tabs

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

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


...
...

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

5. 卡片/Cards

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

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

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


    ...
    ...
    ...
    ...
    ...

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

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

...

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

你可能感兴趣的:(MDL容器组件)