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
|
||||
description: Building blocks for constructing a page layout.
|
||||
components:
|
||||
- name: footer
|
||||
caption: Footer
|
||||
class: mdl-mega-footer / mdl-mini-footer
|
||||
- name: grid
|
||||
caption: Grid
|
||||
class: mdl-grid
|
||||
- name: layout
|
||||
caption: 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
|
||||
caption: Tabs
|
||||
class: mdl-tabs
|
||||
- name: footer
|
||||
caption: Footer
|
||||
class: mdl-mega-footer / mdl-mini-footer
|
||||
- name: loading
|
||||
title: Loading
|
||||
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