| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>layout test</title> |
| |
| <!-- Fonts --> |
| <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" |
| rel="stylesheet"> |
| |
| <!-- Page styles --> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css"> |
| <link rel="stylesheet" href="../../material.min.css"> |
| <link rel="stylesheet" href="../../components/demos.css"> |
| <script src="../../material.min.js"></script> |
| |
| |
| <style> |
| |
| </style> |
| |
| </head> |
| <body> |
| |
| <div style="padding-top: 24px;"> |
| |
| |
| <style> |
| .demo-layout.demo-layout__fixed-drawer { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__fixed-drawer .mdl-layout__content { |
| background: white; |
| } |
| </style> |
| |
| {% include "fixed-drawer.html" %} |
| |
| <!-- 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">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="page-content"><!-- Your content goes here --></div> |
| </main> |
| </div> |
| |
| <style> |
| .demo-layout.demo-layout__fixed-header { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__fixed-header .mdl-layout__content { |
| background: white; |
| } |
| </style> |
| |
| {% include "fixed-header.html" %} |
| |
| <style> |
| .demo-layout.demo-layout__fixed-header-drawer { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content { |
| background: white; |
| } |
| </style> |
| |
| {% include "fixed-header-drawer.html" %} |
| |
| <!-- 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"> |
| <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="fixed-header-drawer-exp"> |
| <i class="material-icons">search</i> |
| </label> |
| <div class="mdl-textfield__expandable-holder"> |
| <input class="mdl-textfield__input" type="text" name="sample" |
| id="fixed-header-drawer-exp"> |
| </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="page-content"><!-- Your content goes here --></div> |
| </main> |
| </div> |
| |
| <!-- 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">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="page-content"><!-- Your content goes here --></div> |
| </main> |
| </div> |
| |
| <style> |
| .demo-layout.demo-layout__fixed-tabs { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__fixed-tabs .mdl-layout__content { |
| background: white; |
| } |
| </style> |
| |
| {% include "fixed-tabs.html" %} |
| |
| <!-- Simple header with fixed tabs. --> |
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header |
| mdl-layout--fixed-tabs"> |
| <header class="mdl-layout__header"> |
| <div class="mdl-layout__header-row"> |
| <!-- Title --> |
| <span class="mdl-layout-title">Title</span> |
| </div> |
| <!-- Tabs --> |
| <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> |
| <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> |
| <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> |
| <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> |
| </div> |
| </header> |
| <div class="mdl-layout__drawer"> |
| <span class="mdl-layout-title">Title</span> |
| </div> |
| <main class="mdl-layout__content"> |
| <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="fixed-tab-2"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="fixed-tab-3"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| </main> |
| </div> |
| |
| <style> |
| .demo-layout.demo-layout__scrollable-tabs { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__scrollable-tabs .mdl-layout__content { |
| background: white; |
| } |
| </style> |
| |
| {% include "scrollable-tabs.html" %} |
| |
| <!-- Simple header with scrollable tabs. --> |
| <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">Title</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> |
| <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a> |
| <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a> |
| <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a> |
| </div> |
| </header> |
| <div class="mdl-layout__drawer"> |
| <span class="mdl-layout-title">Title</span> |
| </div> |
| <main class="mdl-layout__content"> |
| <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="scroll-tab-2"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="scroll-tab-3"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="scroll-tab-4"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="scroll-tab-5"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| <section class="mdl-layout__tab-panel" id="scroll-tab-6"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </section> |
| </main> |
| </div> |
| |
| <style> |
| .demo-layout.demo-layout__scrolling-header { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__scrolling-header .page-content { |
| height: 600px; |
| background: white; |
| } |
| </style> |
| |
| {% include "scrolling-header.html" %} |
| |
| <!-- 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">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"> |
| <div class="page-content"><!-- Your content goes here --></div> |
| </main> |
| </div> |
| |
| <style> |
| .demo-layout.demo-layout__transparent { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| </style> |
| |
| {% include "transparent.html" %} |
| |
| <!-- Uses a transparent header that draws on top of the layout's background --> |
| <style> |
| .demo-layout-transparent { |
| background: url('../assets/demos/transparent.jpg') center / cover; |
| } |
| .demo-layout-transparent .mdl-layout__header, |
| .demo-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="demo-layout-transparent mdl-layout mdl-js-layout"> |
| <header class="mdl-layout__header mdl-layout__header--transparent"> |
| <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> |
| |
| <style> |
| .demo-layout.demo-layout__waterfall-header { |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), |
| 0 3px 1px -2px rgba(0, 0, 0, 0.2), |
| 0 1px 5px 0 rgba(0, 0, 0, 0.12); |
| width: 100%; |
| position: relative; |
| height: 300px; |
| } |
| .demo-layout.demo-layout__waterfall-header .page-content { |
| height: 600px; |
| background: white; |
| } |
| </style> |
| |
| {% include "waterfall-header.html" %} |
| |
| <!-- Uses a header that contracts as the page scrolls down. --> |
| <style> |
| .demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type { |
| padding-right: 0; |
| } |
| </style> |
| |
| <div class="demo-layout-waterfall 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">Title</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="waterfall-exp"> |
| <i class="material-icons">search</i> |
| </label> |
| <div class="mdl-textfield__expandable-holder"> |
| <input class="mdl-textfield__input" type="text" name="sample" |
| id="waterfall-exp"> |
| </div> |
| </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="">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="page-content"><!-- Your content goes here --></div> |
| </main> |
| </div> |
| |
| |
| </div> |
| <!-- Built with love using Material Design Lite --> |
| |
| |
| <script> |
| |
| </script> |
| </body> |
| </html> |