First, the layout / Layout
MDL layout / Layout component used as a container for other elements of the entire page can automatically adapt to different browsers, screen size and equipment.
Layout / Layout components need to be declared in a specific HTML structure:
<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__drawer">...</any>
<any class="mdl-layout__content">...</any>
</any>
It should be noted that, in a layout statement, header and other sub-elements do not all use, for example, you can not sidebar menu:
<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__content">...</any>
</any>
Layout component simplifies the process of creating scalable page. Rather, MDL can set different display style classes depending on the size of the screen:
Desktop - when the screen width is greater than 840px, MDL according to the desktop environment to deal with
Plates - when the screen size is larger than 480px, but less than 840px, MDL Environmental Response tablet press. For example, the auto-hide header, drawer area, etc.
Phone - when the screen size is smaller than 480px, MDL by phone Environmental Response
Configuration Options
| MDL class | Explanation |
|---|---|
| mdl-layout | An element is a layout component |
| mdl-js-layout | For the basic layout of behavioral logic |
| mdl-layout__header | An element is a layout of the head / header element |
| mdl-layout__drawer | An element is a sidebar menu / drawer element |
| mdl-layout__content | An element is a layout of content / content element |
| mdl-layout--fixed-drawer | The sidebar menu / drawer declared as fixed |
| mdl-layout--fixed-header | The head / header declared as fixed |
| mdl-layout--large-screen-only | Hide head / header on small screens |
| mdl-layout--overlay-drawer-button | Add sidebar menu button to activate the layout |
Second, the head / Header
child element layout header assembly consisting of a series of header-row:
Configuration Options
| MDL class | Explanation |
|---|---|
| mdl-layout__header-row | An element is a row container |
| mdl-layout-title | An element is a title |
| mdl-layout-icon | An element is a menu icon |
| mdl-layout-spacer | Automatic filling line declaration elements remaining space of the container |
| mdl-layout__header--transparent | Statement layout head for the transparent background |
| mdl-layout__header--scroll | Statement layout head scrollable |
| mdl-layout__header--waterfall | Multi-row headers when scrolling content, only the first line |
Third, the head - Navigation / Navigatoin
Can use the navigation / navigation elements in the sub-header, the navigation block is composed of a navigation and navigation links container:
<div class="mdl-layout__header-row">
<!--导航容器-->
<nav class="mdl-navigation">
<!--导航链接-->
<a href="...">link</a>
<a href="...">link</a>
<a href="...">link</a>
</nav>
</div>As illustrated, the navigation nav element blocks using established. Automatic horizontally arranged links each of the items in the navigation block header.
A common UI pattern is the title of the left and right of abode navigation, as shown below:
The remaining space mdl-layout-spacer row may automatically fill a container (mdl-layout__header-row) (excluding the navigation title and width), can thus be implemented simply:
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">...</nav>
</div>Configuration Options
| MDL class | Explanation |
|---|---|
| mdl-navigation | An element is a set of navigation MDL |
| mdl navigation__link | Statement anchor element to MDL navigation links |
Fourth, the head - Tab / Tabs
The head of the layout can be embedded options bar / tab-bar, content area can be embedded options panel / tab-panel. When the user clicks on the link in the options bar / tab *, the panel automatically displays the corresponding options:
In a statement the head of layout options bar, you need to follow a specific HTML structure:
<header class="mdl-layout__header">
<!--声明选项栏-->
<div class="mdl-layout__tab-bar">
<!--声明选项，通过href绑定对应的面板，对要激活的选项声明is-active-->
<a href="#panel-1" class="mdl-layout__tab is-active">tab-1</a>
<a href="#panel-2" class="mdl-layout__tab">tab-2</a>
<a href="#panel-3" class="mdl-layout__tab">tab-3</a>
</div>
</header>In the area declared content layout options panel, also depends on the particular structure of HTML:
<main class="mdl-layout__content">
<!--声明选项面板，使用id属性指定锚点，对要初始显示的面板声明is-active-->
<div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
<div class="mdl-layout__tab-panel" id="panel-2">...</div>
<div class="mdl-layout__tab-panel" id="panel-3">...</div>
</main>Configuration Options
| MDL class | Explanation |
|---|---|
| mdl-layout__tab-bar | An element is a option bar |
| mdl-layout__tab | Statement Options link anchor elements |
| mdl-layout__tab-panel | An element is a panel options |
| is-active | The Options link / tab or the Options panel / tab-panel declared to activate |
| mdl-layout--fixed-tabs | The head tab strip declared as fixed |
Five side-down menu / Drawer
Side-down menu is hidden by default, requiring users to click on the button:
Modifications may be provided style class mdl-layout - fixed-drawer-side pull-down menu to display the force (in a small size screen, pull-down menu is always hidden side):
<div class="mdl-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">...</div>
</div>In a side pull may be used to navigate the menu, when all the links are automatically arranged in the vertical direction:
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a href="..." class="mdl-navigation__link">link 1</a>
<a href="..." class="mdl-navigation__link">link 2</a>
</nav>
</div>Configuration Options
| MDL class | Explanation |
|---|---|
| mdl-layout__drawer | An element is a sidebar menu / drawer element |
| mdl-layout-title | An element is a title |
| mdl-navigation | An element is a set of navigation MDL |
| mdl navigation__link | Statement anchor element to MDL navigation links |
| mdl-layout--fixed-drawer | The sidebar menu / drawer declared as fixed |
Free Online Exercises: http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77
This article is reproduced in: Ape 2048 https://www.mk2048.com/blog/blog.php?id=hi1hh0h20hj