blob: 0b2e492fece9ebbcd77f7a0c0be3868fe0cbdb7c [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!-- Uses a header that contracts as the page scrolls down. -->
2<style>
3.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
4 padding-right: 0;
5}
6</style>
7
8<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
9 <header class="mdl-layout__header mdl-layout__header--waterfall">
10 <!-- Top row, always visible -->
11 <div class="mdl-layout__header-row">
12 <!-- Title -->
13 <span class="mdl-layout-title">Title</span>
14 <div class="mdl-layout-spacer"></div>
15 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
16 mdl-textfield--floating-label mdl-textfield--align-right">
17 <label class="mdl-button mdl-js-button mdl-button--icon"
18 for="waterfall-exp">
19 <i class="material-icons">search</i>
20 </label>
21 <div class="mdl-textfield__expandable-holder">
22 <input class="mdl-textfield__input" type="text" name="sample"
23 id="waterfall-exp">
24 </div>
25 </div>
26 </div>
27 <!-- Bottom row, not visible on scroll -->
28 <div class="mdl-layout__header-row">
29 <div class="mdl-layout-spacer"></div>
30 <!-- Navigation -->
31 <nav class="mdl-navigation">
32 <a class="mdl-navigation__link" href="">Link</a>
33 <a class="mdl-navigation__link" href="">Link</a>
34 <a class="mdl-navigation__link" href="">Link</a>
35 <a class="mdl-navigation__link" href="">Link</a>
36 </nav>
37 </div>
38 </header>
39 <div class="mdl-layout__drawer">
40 <span class="mdl-layout-title">Title</span>
41 <nav class="mdl-navigation">
42 <a class="mdl-navigation__link" href="">Link</a>
43 <a class="mdl-navigation__link" href="">Link</a>
44 <a class="mdl-navigation__link" href="">Link</a>
45 <a class="mdl-navigation__link" href="">Link</a>
46 </nav>
47 </div>
48 <main class="mdl-layout__content">
49 <div class="page-content"><!-- Your content goes here --></div>
50 </main>
51</div>