...
...
...
摘要：布局组件需要按特定的结构进行声明需要指出的是，在一个布局声明中，等子元素不一定全部使用，比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。
一、布局/Layout
MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、 屏幕尺寸和设备。
布局/Layout组件需要按特定的HTML结构进行声明：
... ... ...
需要指出的是，在一个布局声明中，header等子元素不一定全部使用，比如你可以不要 侧栏菜单：
... ...
布局组件简化了创建可伸缩页面的过程。确切的说，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，导航块由一个导航容器 和若干导航链接构成：
如上例所示，导航块使用nav元素建立。在头部的导航块自动按水平排列各 链接项。
一个常见的UI模式是标题居左，导航居右，如下图所示：
mdl-layout-spacer可以自动地填充行容器（mdl-layout__header-row） 的剩余空间（扣除title和navigation的宽度），因此可以简单地实现为：
title
配置选项
| MDL class | 说明 |
|---|---|
| mdl-navigation | 声明元素为MDL导航组 |
| mdl-navigation__link | 声明锚点元素为MDL导航链接 |
四、头部 - 选项卡/Tabs
在布局的头部可以嵌入选项栏/tab-bar，内容区域可以嵌入选项面板/tab-panel。当用户点击 选项栏中的链接/tab*时，自动显示对应的选项面板：
在布局头部声明选项栏，需要遵循特定的HTML结构：
在布局的内容区域声明选项面板，也依赖于特定的HTML结构：
配置选项
| 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来强制显示侧拉菜单（在小尺寸 屏幕下，侧拉菜单总是隐藏的）:
...
在侧拉菜单中也可以使用导航，这时所有的链接自动按垂直方向排列：
配置选项
| 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/course/55adae643ad79a1b05dcbf77
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49627.html
摘要：布局组件需要按特定的结构进行声明需要指出的是，在一个布局声明中，等子元素不一定全部使用，比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、 屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
摘要：布局组件需要按特定的结构进行声明需要指出的是，在一个布局声明中，等子元素不一定全部使用，比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、 屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
摘要：可选在手机环境下隐藏该单元格。这是单元格的默认值在垂直方向单元格顶部对齐。使用样式类将外层元素声明为卡片组件，使用等样式类将内层元素声明为标题媒体动作等容器卡片组件默认为宽，最小高，是一个主轴为竖向的容器。 一、单行页脚/Mini footerMDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息： showImg(https://segmentfault.com/i...
摘要：可选在手机环境下隐藏该单元格。这是单元格的默认值在垂直方向单元格顶部对齐。使用样式类将外层元素声明为卡片组件，使用等样式类将内层元素声明为标题媒体动作等容器卡片组件默认为宽，最小高，是一个主轴为竖向的容器。 一、单行页脚/Mini footer MDL的单行页脚/Mini footer组件以单行水平方式组织所有的信息： showImg(https://segmentfault.com/...
摘要：这是一个用于构建响应式应用和网站的前端框架。是基于设计的一套丰富的组件。这是一个对混合式手机应用框架的扩展库。到目前为止它仅大小，而且不依赖于任何第三方的插件，它可以很轻量的被用来创建和应用。 _Material design_是Google开发的，目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则，比如像合适的动画，响应式，以及颜色和阴影的使用。完整的指南详情请看这里...
阅读 779·2021-11-22 13:53
阅读 1312·2021-11-17 09:33
阅读 2136·2021-10-14 09:43
阅读 2522·2021-09-01 11:41
阅读 2068·2021-09-01 10:44
阅读 2727·2021-08-31 09:39
阅读 1339·2019-08-30 15:44
阅读 1749·2019-08-30 13:02
