Material Design Lite - 布局

在本章中，我们将讨论Material Design Lite中的不同布局. HTML5的容器元素为
:

• < div> :  ;提供HTML内容的通用容器.

• < header> : 代表标题部分.

• < footer> : 表示页脚部分.

• < article> : 代表文章.

• < section> : 为各种类型的部分提供通用容器.

MDL提供各种CSS类，以对容器应用各种预定义的视觉和行为增强功能.下表列出了可用的类及其效果.

Sr.No.Class Name&描述1

mdl-layout

将容器标识为MDL组件.在外部容器元素上是必需的.

mdl-js-layout

向布局添加基本MDL行为.在外部容器元素上是必需的.

mdl-layout__header

将容器标识为MDL组件.标题元素必需.

mdl-layout-icon

用于添加应用程序图标.如果两者都可见，则被菜单图标覆盖.可选的图标元素.

mdl-layout__header-row

将容器标识为MDL标题行.标题内容容器必需.

mdl-layout__title

标识布局标题文本.布局标题容器需要.

mdl-layout-spacer

用于对齐标题或抽屉内的元素.它增长以填补剩余空间.通常用于将元素对齐到右侧. div上的可选布局标题.

    8

mdl-navigation

将容器标识为MDL导航组.导航元素必需.

mdl-navigation__link

将锚标识为MDL导航链接.标题和/或抽屉锚元素需要.

mdl-layout__drawer

将容器标识为MDL布局抽屉.抽屉容器元素需要.

mdl-layout__content

将容器标识为MDL布局内容.主元素必需.

mdl-layout__header  -  scroll

使标题滚动内容. header元素可选.

mdl-layout  - 固定抽屉

使抽屉始终可见并打开更大的屏幕.在外部容器元素上可选，而不在抽屉容器元素上.

mdl-layout  -  fixed-header

制作标题始终可见，即使在小屏幕中也是如此.外容器元素可选.

mdl-layout  - 仅限大屏幕

隐藏较小的元素屏幕.在mdl-layout的任何后代上都是可选的.

mdl-layout  - 仅限小屏幕

隐藏大屏幕上的元素.在mdl-layout的任何后代上都是可选的.

mdl-layout__header  -  waterfall

允许"瀑布"效果有多个标题行. header元素可选.

mdl-layout__header  - 透明

使标题透明并在布局背景上绘制. header元素可选.

mdl-layout__header  -  seamed

使用没有阴影的标头. header元素可选.

mdl-layout__tab-bar

将容器标识为MDL标签栏.标题内的容器元素必需(标签布局).

mdl-layout__tab

将锚标识为MDL标签链接.标签栏锚元素必需.

是活跃的

将标签标识为默认活动标签.选项卡栏锚元素和关联的标签栏元素可选.

mdl-layout__tab-panel

将容器标识为制表符内容小组.标签部分元素必需.

mdl-layout  -  fixed-tabs

使用固定标签而不是默认标签可滚动的标签.外部容器元素可选，而不是标题内的容器.

以下示例显示了mdl的使用-layout类用于设置各种容器的样式.

固定抽屉

要创建具有固定抽屉但没有标题的模板，请使用以下MDL类.

• mdl-layout : 将div标识为MDL组件.

• mdl-js-layout : 将基本MDL行为添加到外部div.

• mdl-layout  -  fixed-drawer : 使抽屉始终可见并在较大的屏幕中打开.

• mdl-layout__drawer : 将div标识为MDL布局抽屉.

• mdl-layout-title : 标识布局标题文本.

• mdl-navigation : 将div标识为MDL导航组.

• mdl-navigation__link : 将锚标识为MDL导航链接.

• mdl-layout__content : 将div标识为MDL布局内容.

mdl_fixeddrawer.htm

                                                                     HTML5 Tutorial                           Home               About