mdl框架学习布局

布局 Layout

MDL布局组件是页面所有其他组件的容器，具有响应式UI的特点，这也是material design所具有的特点。

布局的声明：

<div class="mdl-layout mdl-js-layout">
    
</div>

整个页面共有三个部分组成：header，drawer，content。布局所占空间如图所示。


在这里需要注意的是，这三个子元素不一定都要被使用，比如说你可以不适用drawer。

对于各元素的声明：

1. header

<header class="mdl-layout__header">
	something
</header>

2. drawer

<div class="mdl-layout__drawer">
    somthing
</div>

3. content

<main class="mdl-layout__content">
	something
</main>

一些必须在布局中声明的配置选项（可选）：

MDL class	说明
mdl-layout	声明元素为布局组件
mdl-js-layout	为布局实现基本的行为逻辑
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	对多行标题，当滚动内容时，仅显示第一行