文档章节

认识一下 Material Design Lite 布局组件

笔阁
 笔阁
发布于 2015/09/06 15:01
字数 1267
阅读 2631
收藏 2

一、布局/Layout

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

 

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

<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__drawer">...</any>
<any class="mdl-layout__content">...</any>
</any>

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

<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__content">...</any>
</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,导航块由一个导航容器 和若干导航链接构成:

<div class="mdl-layout__header-row">
    <!--导航容器-->
    <nav class="mdl-navigation">
        <!--导航链接-->
        <a href="...">link</a>
        <a href="...">link</a>
        <a href="...">link</a>
    </nav>
</div>

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

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

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

<div class="mdl-layout__header-row">
    <span class="mdl-layout-title">title</span>
    <div class="mdl-layout-spacer"></div>
    <nav class="mdl-navigation">...</nav>
</div>

配置选项

 

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

四、头部 - 选项卡/Tabs

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

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

<header class="mdl-layout__header">
    <!--声明选项栏-->
    <div class="mdl-layout__tab-bar">
        <!--声明选项,通过href绑定对应的面板,对要激活的选项声明is-active-->
        <a href="#panel-1" class="mdl-layout__tab is-active">tab-1</a>
        <a href="#panel-2" class="mdl-layout__tab">tab-2</a>
        <a href="#panel-3" class="mdl-layout__tab">tab-3</a>
    </div>
</header>
在布局的内容区域声明选项面板,也依赖于特定的HTML结构:
<main class="mdl-layout__content">
    <!--声明选项面板,使用id属性指定锚点,对要初始显示的面板声明is-active-->
    <div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
    <div class="mdl-layout__tab-panel" id="panel-2">...</div>
    <div class="mdl-layout__tab-panel" id="panel-3">...</div>
</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来强制显示侧拉菜单(在小尺寸 屏幕下,侧拉菜单总是隐藏的):

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

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

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

配置选项

 

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


免费的在线练习参考:http://www.hubwiz.com/class/55adae643ad79a1b05dcbf77

© 著作权归作者所有

笔阁
粉丝 222
博文 218
码字总数 492488
作品 0
海淀
程序员
私信 提问
Angular Material 的设计之美

ng-matero 0.3 已发布,新增 module schematic 以及 page schematic,详见 README 前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所...

叙帝利
09/05
0
0
10套帮助web程序员高效设计和编写页面布局的免费bootstrap UI套件

Bootstrap可能是目前使用的比较普遍的页面UI组件,但是千篇一律的UI样子肯定会让用户厌倦,在这篇文章中,我们将介绍10组帮助你创建漂亮页面的bootstrap UI套件,希望大家喜欢! 1. Materia...

Janet_zyh
2017/11/27
0
0
Web前端框架 - material-components-web

Material Components for the web(MDC Web),是谷歌专为Web设计的全新前端框架。MDC Web可帮助开发人员执行Material Design,组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立...

匿名
01/09
1K
0
Material Design Lite ,简洁惊艳的前端工具箱。

Material Design Lite简介 本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。 对应每一小节的在线练习地址如下,大家可以去试试。 http://www.hubwiz.com/course/55adae643ad79a1...

笔阁
2015/08/24
2.3K
1
[译]基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

渐进式web应用是大势所趋。越来越多的大公司开始使用这些技术(比如推特:https://mobile.twitter.com/)。 想象你可以在地铁中浏览一个web应用,这个应用能够向用户推送通知并且提供实时的数...

neal
2017/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JDBC+C3P0+DBCP 基本使用

1.概述 这篇文章主要说了JDBC的基本使用,包括Statement,PreparedStatement,JDBC的连接,Mysql创建用户创建数据表,C3P0的连接与配置,DBCP的连接与配置. 2.mysql的处理 这里的JDBC使用Mysql作为...

Blueeeeeee
55分钟前
5
0
MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
9
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
7
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
5
0
4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

你好,我是彤哥,本篇是netty系列的第四篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使用纯纯的N...

彤哥读源码
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部