Hello World!
📅 最后修改于: 2020-10-22 05:48:23 🧑 作者: Mango
在本章中，我们将讨论Material Design Lite中的不同布局。 HTML5具有以下容器元素-
-表示页脚部分。 -代表文章。 -为各种类型的节提供通用容器。 MDL提供了各种CSS类，以对容器应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。 mdl-layout Identifies a container as an MDL component. Required on outer container element. mdl-js-layout Adds basic MDL behavior to layout. Required on outer container element. mdl-layout__header Identifies container as an MDL component. Required on header element. mdl-layout-icon Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element. mdl-layout__header-row Identifies container as MDL header row. Required on header content container. mdl-layout__title Identifies layout title text. Required on layout title container. mdl-layout-spacer Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for aligning elements to the right. Optional on div following layout title. mdl-navigation Identifies container as MDL navigation group. Required on nav element. mdl-navigation__link Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements. mdl-layout__drawer Identifies container as MDL layout drawer. Required on drawer container element. mdl-layout__content Identifies container as MDL layout content. Required on main element. mdl-layout__header–scroll Makes the header scroll with the content. Optional on header element. mdl-layout–fixed-drawer Makes the drawer always visible and open in larger screens. Optional on outer container element and not on drawer container element. mdl-layout–fixed-header Makes the header always visible, even in small screens. Optional on outer container element. mdl-layout–large-screen-only Hides an element on smaller screens. Optional on any descendant of mdl-layout. mdl-layout–small-screen-only Hides an element on larger screens. Optional on any descendant of mdl-layout. mdl-layout__header–waterfall Allows a “waterfall” effect with multiple header lines. Optional on header element. mdl-layout__header–transparent Makes header transparent and draws on top of layout background. Optional on header element. mdl-layout__header–seamed Uses a header without a shadow. Optional on header element. mdl-layout__tab-bar Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout). mdl-layout__tab Identifies anchor as MDL tab link. Required on tab bar anchor elements. is-active Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element. mdl-layout__tab-panel Identifies container as tab content panel. Required on tab section elements. mdl-layout–fixed-tabs Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header. 以下示例显示了使用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类。 mdl-layout–fixed-header-使标题始终可见，即使在小屏幕中也是如此。 验证结果。 要创建带有固定标题和固定抽屉的模板，请使用以下附加的MDL类。 mdl-layout–fixed-drawer-使抽屉始终可见并在较大的屏幕中打开。 mdl-layout–fixed-header-使标题始终可见，即使在小屏幕中也是如此。 验证结果。 要创建带有滚动标题的模板，请使用以下MDL类。 mdl-layout–header–scroll-使标题随内容滚动。 验证结果。 要创建带有随着页面向下滚动而收缩的标题的模板，请使用以下MDL类。 mdl-layout__header–waterfall-允许具有多个标题行的“瀑布”效果。 验证结果。 要使用带有可滚动标签的标题创建模板，请使用以下MDL类。 mdl-layout__tab-bar-将容器标识为MDL标签栏。 mdl-layout__tab-将锚点标识为MDL选项卡链接。 mdl-layout__tab-panel-将容器标识为选项卡内容面板。 验证结果。 若要创建带有带有固定选项卡的标题的模板，请使用以下附加的MDL类。 mdl-layout–fixed-tabs-使用固定选项卡，而不是默认的可滚动选项卡。 验证结果。 -为HTML内容提供通用容器。
Sr.No.
Class Name & Description
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
固定式抽屉
mdl_fixeddrawer.htm
HTML5 Tutorial
Hello World!
结果
固定头
mdl_fixedheader.htm
HTML5 Tutorial
HTML5 Tutorial
Hello World!
结果
固定页眉和抽屉
mdl_fixedheader.htm
HTML5 Tutorial
HTML5 Tutorial
Hello World!
结果
滚动页眉
mdl_scrollingheader.htm
HTML5 Tutorial
HTML5 Tutorial
Hello World!
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
结果
合同标头
mdl_waterfallheader.htm
HTML5 Tutorial
HTML5 Tutorial
Hello World!
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
结果
具有可滚动标签的固定标题
mdl_scrollabletabheader.htm
HTML5 Tutorial
HTML5 Tutorial
Tab 1 Contents
Tab 2 Contents
Tab 3 Contents
结果
带有固定标签的固定页眉
mdl_fixedtabheader.htm
HTML5 Tutorial
HTML5 Tutorial
Tab 1 Contents
Tab 2 Contents
Tab 3 Contents
结果