Adding first four layout snippets
Sérgio Gomes
parent
8cf007bdec
commit
ac794fdfd4
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
|
|
@ -101,18 +101,39 @@ categories:
|
||||||
title: Layout
|
title: Layout
|
||||||
description: Building blocks for constructing a page layout.
|
description: Building blocks for constructing a page layout.
|
||||||
components:
|
components:
|
||||||
- name: footer
|
|
||||||
caption: Footer
|
|
||||||
class: mdl-mega-footer / mdl-mini-footer
|
|
||||||
- name: grid
|
|
||||||
caption: Grid
|
|
||||||
class: mdl-grid
|
|
||||||
- name: layout
|
- name: layout
|
||||||
caption: Layout
|
caption: Layout
|
||||||
class: mdl-layout
|
class: mdl-layout
|
||||||
|
snippets:
|
||||||
|
- snippet_group:
|
||||||
|
- caption: Transparent header
|
||||||
|
file: transparent.html
|
||||||
|
demo_file: transparent-demo.html
|
||||||
|
full_width: true
|
||||||
|
- snippet_group:
|
||||||
|
- caption: Fixed drawer, no header
|
||||||
|
file: fixed-drawer.html
|
||||||
|
demo_file: fixed-drawer-demo.html
|
||||||
|
full_width: true
|
||||||
|
- snippet_group:
|
||||||
|
- caption: Fixed header
|
||||||
|
file: fixed-header.html
|
||||||
|
demo_file: fixed-header-demo.html
|
||||||
|
full_width: true
|
||||||
|
- snippet_group:
|
||||||
|
- caption: Fixed header and drawer
|
||||||
|
file: fixed-header-drawer.html
|
||||||
|
demo_file: fixed-header-drawer-demo.html
|
||||||
|
full_width: true
|
||||||
|
- name: grid
|
||||||
|
caption: Grid
|
||||||
|
class: mdl-grid
|
||||||
- name: tabs
|
- name: tabs
|
||||||
caption: Tabs
|
caption: Tabs
|
||||||
class: mdl-tabs
|
class: mdl-tabs
|
||||||
|
- name: footer
|
||||||
|
caption: Footer
|
||||||
|
class: mdl-mega-footer / mdl-mini-footer
|
||||||
- name: loading
|
- name: loading
|
||||||
title: Loading
|
title: Loading
|
||||||
description: Indicate loading and progress states.
|
description: Indicate loading and progress states.
|
||||||
|
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.demo-layout {
|
|
||||||
width: 100%;
|
|
||||||
float: left;
|
|
||||||
margin: 0 40px 40px 0;
|
|
||||||
border: 1px solid #888888;
|
|
||||||
position: relative;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-layout__content {
|
|
||||||
height: 1000px;
|
|
||||||
background: linear-gradient(unquote("rgb(#{$palette-grey-50})"), unquote("rgb(#{$palette-grey-300})"));
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-layout__content-red {
|
|
||||||
height: 1000px;
|
|
||||||
background: linear-gradient(unquote("rgb(#{$palette-red-50})"), unquote("rgb(#{$palette-red-100})"));
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-layout__content-green {
|
|
||||||
height: 1000px;
|
|
||||||
background: linear-gradient(unquote("rgb(#{$palette-green-50})"), unquote("rgb(#{$palette-green-100})"));
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-layout__content-blue {
|
|
||||||
height: 1000px;
|
|
||||||
background: linear-gradient(unquote("rgb(#{$palette-blue-50})"), unquote("rgb(#{$palette-blue-100})"));
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Styles for multi-row layout demo. */
|
|
||||||
.demo-page--layout #my_text_changes {
|
|
||||||
transition-property: font-size;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
font-size: 34px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout #compact_navigation {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout #expanded_navigation {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout .mdl-layout__header.is-compact #my_text_changes {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout .mdl-layout__header.is-compact #compact_navigation {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout .mdl-layout__header.is-compact #expanded_navigation {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout .mdl-layout__header.is-compact #my_text_changes:after {
|
|
||||||
content: " \0000a0 > \0000a0 Multi-row layout demo";
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Styles for transparent header demo. */
|
|
||||||
.demo-page--layout #transparent_demo {
|
|
||||||
background-color: #948d85;
|
|
||||||
background-image: url('../demo-images/desktop-handsfree-hero.jpg');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-attachment: scroll;
|
|
||||||
|
|
||||||
background-position: center 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-page--layout .demo-app-icon {
|
|
||||||
background-image: url('data:image/png;base64,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');
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
@ -1,389 +0,0 @@
|
||||||
<div class="demo-preview-block">
|
|
||||||
<h3>Default layout</h3>
|
|
||||||
<p>Uses a header for large screen sizes and a collapsible drawer for smaller
|
|
||||||
screens.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
|
||||||
<header class="mdl-layout__header">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</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="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Scrolling header</h3>
|
|
||||||
<p>Same as the standard layout, but the header scrolls with the content.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
|
||||||
<header class="mdl-layout__header mdl-layout__header--scroll">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</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="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Fixed drawer with header</h3>
|
|
||||||
<p>The drawer is always open in large screen sizes, functioning as side
|
|
||||||
navigation.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
|
||||||
<header class="mdl-layout__header">
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<span class="mdl-layout-title">Fixed drawer layout demo</span>
|
|
||||||
<div class="mdl-layout-spacer"></div>
|
|
||||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
|
|
||||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean">
|
|
||||||
<i class="material-icons">search</i>
|
|
||||||
</label>
|
|
||||||
<div class="mdl-textfield__expandable-holder">
|
|
||||||
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Fixed drawer (no header)</h3>
|
|
||||||
<p>Same as the previous layout, but with no header.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Fixed header</h3>
|
|
||||||
<p>Always shows a header, even in smaller screens.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
||||||
<header class="mdl-layout__header">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<!-- Add spacer, to align navigation to the right -->
|
|
||||||
<div class="mdl-layout-spacer"></div>
|
|
||||||
<!-- Navigation. We hide it in small screens. -->
|
|
||||||
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Fixed drawer and fixed header</h3>
|
|
||||||
<p>The drawer is always open in large screens. The header is always shown,
|
|
||||||
even in small screens.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<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">
|
|
||||||
<span class="mdl-layout-title">Fixed drawer and header</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Multi-row layout</h3>
|
|
||||||
<p>Example of a more complex waterfall header, with multiple rows (on large
|
|
||||||
screens only).</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
|
|
||||||
<header class="mdl-layout__header mdl-layout__header--waterfall">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<!-- Top row -->
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-animation--default" id="my_text_changes">
|
|
||||||
Material Design Lite
|
|
||||||
</span>
|
|
||||||
<div class="mdl-layout-spacer"></div>
|
|
||||||
<!-- Only show when compact, check CSS -->
|
|
||||||
<nav class="mdl-navigation" id="compact_navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<!-- Middle row, subtitle -->
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<span class="mdl-typography--title">
|
|
||||||
Multi-row layout demo
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<!-- Bottom row -->
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<div class="mdl-layout-spacer"></div>
|
|
||||||
<!-- Only show when expanded, check CSS -->
|
|
||||||
<nav class="mdl-navigation" id="expanded_navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<div class="demo-layout__content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Transparent header</h3>
|
|
||||||
<p>Uses a transparent header that draws on top of the layout's background.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout" id="transparent_demo">
|
|
||||||
<header class="mdl-layout__header mdl-layout__header--transparent">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</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="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="mdl-layout__drawer">
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
<nav class="mdl-navigation">
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Hello</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">World.</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">How</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">Are</a>
|
|
||||||
<a class="mdl-navigation__link" href="javascript:void(0);">You?</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Scrollable tabs</h3>
|
|
||||||
<p>Simple header with scrollable tabs.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
||||||
<header class="mdl-layout__header">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
</div>
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab is-active">Blue</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red</a>
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Two</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Two</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Two</a>
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Three</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Three</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Three</a>
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Four</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Four</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Four</a>
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Five</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Five</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Five</a>
|
|
||||||
<a href="#blue-panel-scroll" class="mdl-layout__tab">Blue Six</a>
|
|
||||||
<a href="#green-panel-scroll" class="mdl-layout__tab">Green Six</a>
|
|
||||||
<a href="#red-panel-scroll" class="mdl-layout__tab">Red Six</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-scroll">
|
|
||||||
<div class="demo-layout__content-blue"></div>
|
|
||||||
</section>
|
|
||||||
<section class="mdl-layout__tab-panel" id="green-panel-scroll">
|
|
||||||
<div class="demo-layout__content-green"></div>
|
|
||||||
</section>
|
|
||||||
<section class="mdl-layout__tab-panel" id="red-panel-scroll">
|
|
||||||
<div class="demo-layout__content-red"></div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Fixed tabs</h3>
|
|
||||||
<p>Simple header with fixed tabs.</p>
|
|
||||||
|
|
||||||
<div class="demo-layout">
|
|
||||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
|
|
||||||
<header class="mdl-layout__header">
|
|
||||||
<!-- Icon -->
|
|
||||||
<div class="mdl-layout-icon demo-app-icon"></div>
|
|
||||||
<div class="mdl-layout__header-row">
|
|
||||||
<!-- Title -->
|
|
||||||
<span class="mdl-layout-title">Material Design Lite</span>
|
|
||||||
</div>
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
|
||||||
<a href="#blue-panel-fixed" class="mdl-layout__tab is-active">Blue</a>
|
|
||||||
<a href="#green-panel-fixed" class="mdl-layout__tab">Green</a>
|
|
||||||
<a href="#red-panel-fixed" class="mdl-layout__tab">Red</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="mdl-layout__content">
|
|
||||||
<section class="mdl-layout__tab-panel is-active" id="blue-panel-fixed">
|
|
||||||
<div class="demo-layout__content-blue"></div>
|
|
||||||
</section>
|
|
||||||
<section class="mdl-layout__tab-panel" id="green-panel-fixed">
|
|
||||||
<div class="demo-layout__content-green"></div>
|
|
||||||
</section>
|
|
||||||
<section class="mdl-layout__tab-panel" id="red-panel-fixed">
|
|
||||||
<div class="demo-layout__content-red"></div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<style>
|
||||||
|
.fixed-drawer-container {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="fixed-drawer-container">
|
||||||
|
{% include "fixed-drawer.html" %}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
|
||||||
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
|
||||||
|
mdl-layout--overlay-drawer-button">
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
|
<span class="mdl-layout-title">Title</span>
|
||||||
|
<nav class="mdl-navigation">
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
<div class="demo-layout__content"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<style>
|
||||||
|
.fixed-header-container {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="fixed-header-container">
|
||||||
|
{% include "fixed-header.html" %}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<style>
|
||||||
|
.fixed-header-drawer-container {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="fixed-header-drawer-container">
|
||||||
|
{% include "fixed-header-drawer.html" %}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!-- The drawer is always open in large screens. The header is always shown,
|
||||||
|
even in small screens. -->
|
||||||
|
<div class="demo-layout">
|
||||||
|
<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">
|
||||||
|
<div class="mdl-layout-spacer"></div>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
||||||
|
mdl-textfield--floating-label mdl-textfield--align-right">
|
||||||
|
<label class="mdl-button mdl-js-button mdl-button--icon"
|
||||||
|
for="sample-expclean">
|
||||||
|
<i class="material-icons">search</i>
|
||||||
|
</label>
|
||||||
|
<div class="mdl-textfield__expandable-holder">
|
||||||
|
<input class="mdl-textfield__input" type="text" name="sample"
|
||||||
|
id="sample-expclean" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
|
<span class="mdl-layout-title">Title</span>
|
||||||
|
<nav class="mdl-navigation">
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
<div class="demo-layout__content"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!-- Always shows a header, even in smaller screens. -->
|
||||||
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||||
|
<header class="mdl-layout__header">
|
||||||
|
<!-- Icon -->
|
||||||
|
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||||
|
<div class="mdl-layout__header-row">
|
||||||
|
<!-- Title -->
|
||||||
|
<span class="mdl-layout-title">Title</span>
|
||||||
|
<!-- Add spacer, to align navigation to the right -->
|
||||||
|
<div class="mdl-layout-spacer"></div>
|
||||||
|
<!-- Navigation. We hide it in small screens. -->
|
||||||
|
<nav class="mdl-navigation mdl-layout--large-screen-only">
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
|
<span class="mdl-layout-title">Title</span>
|
||||||
|
<nav class="mdl-navigation">
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
<div class="demo-layout__content"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<style>
|
||||||
|
.layout-transparent-container {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
position: relative;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layout-transparent-container">
|
||||||
|
{% include "transparent.html" %}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<!-- Uses a transparent header that draws on top of the layout's background -->
|
||||||
|
<style>
|
||||||
|
.layout-transparent {
|
||||||
|
background: url('../assets/demos/transparent.jpg') center / cover;
|
||||||
|
}
|
||||||
|
.layout-transparent .mdl-layout__header,
|
||||||
|
.layout-transparent .mdl-layout__drawer-button {
|
||||||
|
/* This background is dark, so we set text to white. Use 87% black instead if
|
||||||
|
your background is light. */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="layout-transparent mdl-layout mdl-js-layout">
|
||||||
|
<header class="mdl-layout__header mdl-layout__header--transparent">
|
||||||
|
<!-- Icon -->
|
||||||
|
<div class="mdl-layout-icon demo-app-icon"></div>
|
||||||
|
<div class="mdl-layout__header-row">
|
||||||
|
<!-- Title -->
|
||||||
|
<span class="mdl-layout-title">Title</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="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="mdl-layout__drawer">
|
||||||
|
<span class="mdl-layout-title">Title</span>
|
||||||
|
<nav class="mdl-navigation">
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
<a class="mdl-navigation__link" href="">Link</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue