third_party/ot-br-posix/repo/third_party/mdl/repo/src/layout/snippets/fixed-tabs.html

   1 <!-- Simple header with fixed tabs. -->
   2 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
   3             mdl-layout--fixed-tabs">
   4   <header class="mdl-layout__header">
   5     <div class="mdl-layout__header-row">
   6       <!-- Title -->
   7       <span class="mdl-layout-title">Title</span>
   8     </div>
   9     <!-- Tabs -->
  10     <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  11       <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
  12       <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
  13       <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
  14     </div>
  15   </header>
  16   <div class="mdl-layout__drawer">
  17     <span class="mdl-layout-title">Title</span>
  18   </div>
  19   <main class="mdl-layout__content">
  20     <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
  21       <div class="page-content"><!-- Your content goes here --></div>
  22     </section>
  23     <section class="mdl-layout__tab-panel" id="fixed-tab-2">
  24       <div class="page-content"><!-- Your content goes here --></div>
  25     </section>
  26     <section class="mdl-layout__tab-panel" id="fixed-tab-3">
  27       <div class="page-content"><!-- Your content goes here --></div>
  28     </section>
  29   </main>
  30 </div>