Material Design Lite 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

MDL的多行页脚/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等元素。