本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ 。网站上有对应每一小节的在线练习大家可以去试试。

一、布局/Layout

MDL的布局/Layout组件用来作为整个页面其他元素的容器,可以自动适应不同的浏览器、 屏幕尺寸和设备。

布局/Layout组件需要按特定的HTML结构进行声明:

  1. <any class="mdl-layout mdl-js-layout">
  2. <any class="mdl-layout__header">...</any>
  3. <any class="mdl-layout__drawer">...</any>
  4. <any class="mdl-layout__content">...</any>
  5. </any>

需要指出的是,在一个布局声明中,header等子元素不一定全部使用,比如你可以不要 侧栏菜单:

  1. <any class="mdl-layout mdl-js-layout">
  2. <any class="mdl-layout__header">...</any>
  3. <any class="mdl-layout__content">...</any>
  4. </any>

布局组件简化了创建可伸缩页面的过程。确切的说,MDL可以根据屏幕的尺寸设定样式类 的不同显示效果:

  • 桌面 - 当屏幕宽度大于840px时,MDL按桌面环境应对
  • 平板 - 当屏幕尺寸大于480px,但小于840px时,MDL按平板环境应对。比如,自动隐藏 header、drawer区域等
  • 手机 - 当屏幕尺寸小于480px时,MDL按手机环境应对

配置选项

MDL class 说明
mdl-layout 声明元素为布局组件
mdl-js-layout 为布局实现基本的行为逻辑
mdl-layout__header 声明元素为布局头/header元素
mdl-layout__drawer 声明元素为侧栏菜单/drawer元素
mdl-layout__content 声明元素为布局内容/content元素
mdl-layout--fixed-drawer 将侧栏菜单/drawer声明为固定式
mdl-layout--fixed-header 将头部/header声明为固定式
mdl-layout--large-screen-only 在小尺寸屏幕上隐藏头部/header
mdl-layout--overlay-drawer-button 为布局添加激活侧栏菜单按钮

二、头部/Header

布局组件的header子元素由一系列header-row组成:

配置选项

MDL class 说明
mdl-layout__header-row 声明元素为行容器
mdl-layout-title 声明元素为标题
mdl-layout-icon 声明元素为菜单图标
mdl-layout-spacer 声明元素自动填充行容器剩余空间
mdl-layout__header--transparent 声明布局头为透明背景
mdl-layout__header--scroll 声明布局头为可滚动
mdl-layout__header--waterfall 对多行标题,当滚动内容时,仅显示第一行

三、头部 - 导航/Navigatoin

在header子元素内可以使用导航/navigation,导航块由一个导航容器 和若干导航链接构成:

  1. <div class="mdl-layout__header-row">
  2. <!--导航容器-->
  3. <nav class="mdl-navigation">
  4. <!--导航链接-->
  5. <a href="...">link</a>
  6. <a href="...">link</a>
  7. <a href="...">link</a>
  8. </nav>
  9. </div>

如上例所示,导航块使用nav元素建立。在头部的导航块自动按水平排列各 链接项。

一个常见的UI模式是标题居左,导航居右,如下图所示:

mdl-layout-spacer可以自动地填充行容器(mdl-layout__header-row) 的剩余空间(扣除title和navigation的宽度),因此可以简单地实现为:

  1. <div class="mdl-layout__header-row">
  2. <span class="mdl-layout-title">title</span>
  3. <div class="mdl-layout-spacer"></div>
  4. <nav class="mdl-navigation">...</nav>
  5. </div>

配置选项

MDL class 说明
mdl-navigation 声明元素为MDL导航组
mdl-navigation__link 声明锚点元素为MDL导航链接

四、头部 - 选项卡/Tabs

在布局的头部可以嵌入选项栏/tab-bar,内容区域可以嵌入选项面板/tab-panel。当用户点击 选项栏中的链接/tab*时,自动显示对应的选项面板:

在布局头部声明选项栏,需要遵循特定的HTML结构:

  1. <header class="mdl-layout__header">
  2. <!--声明选项栏-->
  3. <div class="mdl-layout__tab-bar">
  4. <!--声明选项,通过href绑定对应的面板,对要激活的选项声明is-active-->
  5. <a href="#panel-1" class="mdl-layout__tab is-active">tab-</a>
  6. <a href="#panel-2" class="mdl-layout__tab">tab-</a>
  7. <a href="#panel-3" class="mdl-layout__tab">tab-</a>
  8. </div>
  9. </header>

在布局的内容区域声明选项面板,也依赖于特定的HTML结构:

  1. <main class="mdl-layout__content">
  2. <!--声明选项面板,使用id属性指定锚点,对要初始显示的面板声明is-active-->
  3. <div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
  4. <div class="mdl-layout__tab-panel" id="panel-2">...</div>
  5. <div class="mdl-layout__tab-panel" id="panel-3">...</div>
  6. </main>

配置选项

MDL class 说明
mdl-layout__tab-bar 声明元素为选项栏
mdl-layout__tab 声明锚点元素为选项链接
mdl-layout__tab-panel 声明元素为选项面板
is-active 将选项链接/tab或选项面板/tab-panel声明为激活
mdl-layout--fixed-tabs 将头部tab条声明为固定式

五、侧拉菜单/Drawer

侧拉菜单默认情况下是隐藏的,需要用户点击按钮:

可以设置修饰样式类mdl-layout--fixed-drawer来强制显示侧拉菜单(在小尺寸 屏幕下,侧拉菜单总是隐藏的):

  1. <div class="mdl-layout mdl-layout--fixed-drawer">
  2. <div class="mdl-layout__drawer">...</div>
  3. </div>

在侧拉菜单中也可以使用导航,这时所有的链接自动按垂直方向排列:

  1. <div class="mdl-layout__drawer">
  2. <nav class="mdl-navigation">
  3. <a href="..." class="mdl-navigation__link">link </a>
  4. <a href="..." class="mdl-navigation__link">link </a>
  5. </nav>
  6. </div>

配置选项

MDL class 说明
mdl-layout__drawer 声明元素为侧栏菜单/drawer元素
mdl-layout-title 声明元素为标题
mdl-navigation 声明元素为MDL导航组
mdl-navigation__link 声明锚点元素为MDL导航链接
mdl-layout--fixed-drawer 将侧栏菜单/drawer声明为固定式

网站上有对应每一小节的在线练习大家可以去试试。

Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。的更多相关文章

  1. Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, 博客地址为http://www.cnblogs.com/jasonnode/ . 网站上有对应 ...

  2. Material Design Lite,简洁惊艳的前端工具箱 之 容器组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  3. Material Design Lite,简洁惊艳的前端工具箱。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  4. Materialize和Material Design Lite的区别

    Material Design Lite是google官方库,Materialize是第三方 Material Design Lite不依赖jquery,Materialize依赖jquery Mat ...

  5. Android Material Design控件使用(一)——ConstraintLayout 约束布局

    参考文章: 约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇 介绍 Android ConstraintLayout是谷歌推出替代PrecentLa ...

  6. Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用

    cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...

  7. MDL---Material Design Lite框架推荐

    INTRO material design相比不会陌生, 现在的移动端基本遵循了这个设计规范, 微软退出过一个残次品universal design(花了半个月时间赶出来的规范)也是借鉴了MD的思想, ...

  8. Top 15 - Material Design框架和类库(译)

    _Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...

  9. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

随机推荐

  1. 日志分析_统计每日各时段的的PV,UV

    第一步: 需求分析 需要哪些字段(时间:每一天,各个时段,id,url,guid,tracTime) 需要分区为天/时 PV(统计记录数) UV(guid去重) 第二步: 实施步骤 建Hive表,表列 ...

  2. 从show slave status 中判断mysql同步状态

    slave status 中检查同步状态: 1.sql线程和io线程显示yes Slave_IO_Running: Yes Slave_SQL_Running: Yes 2. Master_Log_F ...

  3. mysql双主复制总结

    双主复制: 1).在两台服务器上各自建立一个具有复制权限的用户: 2).修改配置文件: # 主服务器A上 [mysqld] server-id = 10 log-bin = mysql-bin rel ...

  4. 前端性能优化----yahoo前端性能团队总结的35条黄金定律

    转自 http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

  5. JQuery类型转换

    来自:http://blog.csdn.net/kfanning/archive/2010/04/14/5485412.aspx 转换成数字 ECMAScript提供了两种把非数字的原始值转换成数字的 ...

  6. FileIOUtils.java

    package com.vcredit.ddcash.batch.util; import com.vcredit.ddcash.batch.autoAdvance.AutoAdvanceTask;i ...

  7. Web前端开发基础 第四课(CSS一些性质)

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  8. 不正确使用WeakHashMap引起的卡死

    公司的jenkins今天出了一点问题,起来以后,总是处于等待状态,所有的任务无法正常加载.登陆界面也出不了.而且cpu占用率100% 把线程导出来,看到: “Loading job NMS_Patch ...

  9. 增强for循环

    import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.Li ...

  10. easyUI datagrid笔记

    easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <lin ...