|
8 | 8 | <title>plaincode | app development + tech blog</title> |
9 | 9 | </head> |
10 | 10 | <body> |
| 11 | +<!-- Simple header with scrollable tabs. --> |
| 12 | +<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> |
| 13 | + <header class="mdl-layout__header"> |
| 14 | + <div class="mdl-layout__header-row"> |
| 15 | + <!-- Title --> |
| 16 | + <span class="mdl-layout-title">Title</span> |
| 17 | + </div> |
| 18 | + <!-- Tabs --> |
| 19 | + <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> |
| 20 | + <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a> |
| 21 | + <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a> |
| 22 | + <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a> |
| 23 | + <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a> |
| 24 | + <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a> |
| 25 | + <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a> |
| 26 | + </div> |
| 27 | + </header> |
| 28 | + <div class="mdl-layout__drawer"> |
| 29 | + <span class="mdl-layout-title">Title</span> |
| 30 | + </div> |
| 31 | + <main class="mdl-layout__content"> |
| 32 | + <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"> |
| 33 | + <div class="page-content"><!-- Your content goes here --></div> |
| 34 | + </section> |
| 35 | + <section class="mdl-layout__tab-panel" id="scroll-tab-2"> |
| 36 | + <div class="page-content"><!-- Your content goes here --></div> |
| 37 | + </section> |
| 38 | + <section class="mdl-layout__tab-panel" id="scroll-tab-3"> |
| 39 | + <div class="page-content"><!-- Your content goes here --></div> |
| 40 | + </section> |
| 41 | + <section class="mdl-layout__tab-panel" id="scroll-tab-4"> |
| 42 | + <div class="page-content"><!-- Your content goes here --></div> |
| 43 | + </section> |
| 44 | + <section class="mdl-layout__tab-panel" id="scroll-tab-5"> |
| 45 | + <div class="page-content"><!-- Your content goes here --></div> |
| 46 | + </section> |
| 47 | + <section class="mdl-layout__tab-panel" id="scroll-tab-6"> |
| 48 | + <div class="page-content"><!-- Your content goes here --></div> |
| 49 | + </section> |
| 50 | + </main> |
| 51 | +</div> |
11 | 52 | Hello World<br/> |
12 | 53 | <!-- Colored FAB button --> |
13 | 54 | <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> |
|
0 commit comments