多行页脚/Mega footer
MDL的多行页脚/Mega footer组件可以包含多个垂直排列的区域。当我们需要一个复杂 的页脚区域来呈现信息及提供交互手段时,可以使用这个组件:
从上图容易看出,单行页脚/Mini footer组件相当于仅适用多行页脚/Mega footer 组件的bottom-section区域。
当声明为mdl-mega-footer--link-list样式的列表元素出现在drop-down-section 区域时,其列表项是垂直排列的。
配置选项
MDL class | 说明 |
---|---|
mdl-mega-footer | 声明元素为多行页脚组件 |
mdl-mega-footer--top-section | 声明元素为顶部区域 |
mdl-mega-footer--middle-section | 声明元素为中部区域 |
mdl-mega-footer--bottom-section | 声明元素为底部区域 |
mdl-mega-footer--left-section | 声明元素在容器内居左 |
mdl-mega-footer--right-section | 声明元素在容器内居右 |
mdl-mega-footer--drop-down-section | 声明元素为垂直内容区 |
mdl-mega-footer--link-list | 声明元素为链接容器 |
mdl-mega-footer--heading | 声明元素为标题 |
mdl-logo | 声明元素为logo区 |
mdl-mega-footer--social-btn | 声明元素为36px正方大小 |
为示例代码中的页脚区域添加top-section,并在其中使用drop-down-section、
heading、logo等元素。