third_party/ot-br-posix/repo/third_party/mdl/repo/src/layout/snippets/waterfall-header.html

   1 <!-- 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>