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

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