Sr.No. | 类名和描述 |
1 |
mdl-layout
将容器标识为 MDL 组件。外部容器元素需要。
|
2 |
mdl-js-layout
向布局添加基本的 MDL 行为。外部容器元素需要。
|
3 |
mdl-layout__header
将容器标识为 MDL 组件。标题元素是必需的。
|
4 |
mdl-layout-icon
用于添加应用程序图标。如果两者都可见,则被菜单图标覆盖。可选的图标元素。
|
5 |
mdl-layout__header-row
将容器标识为 MDL 标题行。标头内容容器需要。
|
6 |
mdl-layout__title
标识布局标题文本。布局标题容器需要。
|
7 |
mdl-layout-spacer
用于对齐页眉或抽屉内的元素。它会增长以填充剩余空间。通常用于将元素向右对齐。在布局标题之后的 div 上可选。
|
8 |
mdl-navigation
将容器标识为 MDL 导航组。导航元素需要。
|
9 |
mdl-navigation__link
将锚点标识为 MDL 导航链接。标题和/或抽屉锚元素需要。
|
10 |
mdl-layout__drawer
将容器标识为 MDL 布局抽屉。抽屉容器元素需要。
|
11 |
mdl-layout__content
将容器标识为 MDL 布局内容。主要元素需要。
|
12 |
mdl-layout__header--scroll
使标题随内容滚动。标题元素可选。
|
13 |
mdl-layout--fixed-drawer
使抽屉在更大的屏幕上始终可见并打开。在外部容器元素上是可选的,而不是在抽屉容器元素上。
|
14 |
mdl-layout--fixed-header
使标题始终可见,即使在小屏幕中也是如此。在外部容器元素上可选。
|
15 |
mdl-layout--large-screen-only
在较小的屏幕上隐藏元素。在 mdl-layout 的任何后代上可选。
|
16 |
mdl-layout--small-screen-only
在大屏幕上隐藏元素。在 mdl-layout 的任何后代上可选。
|
17 |
mdl-layout__header--waterfall
允许具有多个标题行的"瀑布"效果。标题元素可选。
|
18 |
mdl-layout__header--transparent
使标题透明并绘制在布局背景之上。标题元素可选。
|
19 |
mdl-layout__header--seamed
使用没有阴影的标题。标题元素可选。
|
20 |
mdl-layout__tab-bar
将容器标识为 MDL 标签栏。标题内的容器元素需要(选项卡式布局)。
|
21 |
mdl-layout__tab
将锚点标识为 MDL 选项卡链接。标签栏锚元素需要。
|
22 |
is-active
将选项卡标识为默认活动选项卡。选项卡栏锚元素和关联的选项卡部分元素上的可选。
|
23 |
mdl-layout__tab-panel
将容器标识为标签内容面板。在选项卡部分元素上是必需的。
|
24 |
mdl-layout--fixed-tabs
使用固定标签而不是默认的可滚动标签。外部容器元素可选,而不是标题内的容器。
|
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- No header, and the drawer stays open on larger screens (fixed drawer).--> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer"> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content" style = "padding-left:100px;">Hello World!</div> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--Always shows a header, even in smaller screens.--> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class = "mdl-layout__header"> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> <!--Add spacer, to align navigation to the right--> <div class = "mdl-layout-spacer"></div> <!--Navigation--> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "" style = "color:gray">Home</a> <a class = "mdl-navigation__link" href = "" style = "color:gray">About</a> </nav> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content">Hello World!</div> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--The drawer is always open in large screens. The header is always shown, even in small screens.--> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> <header class = "mdl-layout__header"> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> <!--Add spacer, to align navigation to the right--> <div class = "mdl-layout-spacer"></div> <!--Navigation--> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "" style = "color:gray">Home</a> <a class = "mdl-navigation__link" href = "" style = "color:gray">About</a> </nav> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content">Hello World!</div> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Uses a header that scrolls with the text, rather than staying locked at the top--> <div class = "mdl-layout mdl-js-layout "> <header class = "mdl-layout__header mdl-layout__header--scroll"> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> <!--Add spacer, to align navigation to the right--> <div class = "mdl-layout-spacer"></div> <!--Navigation--> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content" style = "padding-left:100px;">Hello World! <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... </div> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--The drawer is always open in large screens. The header is always shown, even in small screens.--> <div class = "mdl-layout mdl-js-layout "> <header class = "mdl-layout__header mdl-layout__header--waterfall"> <!--Top row, always visible--> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> <!--Add spacer, to align navigation to the right--> <div class = "mdl-layout-spacer"></div> </div> <!--Bottom row, not visible on scroll--> <div class = "mdl-layout__header-row"> <div class = "mdl-layout-spacer"></div> <!--Navigation--> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content" style = "padding-left:100px;">Hello World! <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... <br/><br/><br/><br/><br/><br/><br/><br/>... </div> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--The drawer is always open in large screens. The header is always shown, even in small screens.--> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class = "mdl-layout__header"> <!--Top row, always visible--> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> </div> <!--Tabs--> <div class = "mdl-layout__tab-bar mdl-js-ripple-effect"> <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a> <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a> <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1"> <div class = "page-content">Tab 1 Contents</div> </section> <section class = "mdl-layout__tab-panel" id = "scroll-tab-2"> <div class = "page-content">Tab 2 Contents</div> </section> <section class = "mdl-layout__tab-panel" id = "scroll-tab-3"> <div class = "page-content">Tab 3 Contents</div> </section> </main> </div> </body> </html>
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!--The drawer is always open in large screens. The header is always shown, even in small screens.--> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"> <header class = "mdl-layout__header"> <!--Top row, always visible--> <div class = "mdl-layout__header-row"> <!--Title--> <span class = "mdl-layout-title">HTML5 Tutorial</span> </div> <!--Tabs--> <div class = "mdl-layout__tab-bar mdl-js-ripple-effect"> <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a> <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a> <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">HTML5 Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1"> <div class = "page-content">Tab 1 Contents</div> </section> <section class = "mdl-layout__tab-panel" id = "scroll-tab-2"> <div class = "page-content">Tab 2 Contents</div> </section> <section class = "mdl-layout__tab-panel" id = "scroll-tab-3"> <div class = "page-content">Tab 3 Contents</div> </section> </main> </div> </body> </html>