Difference between revisions of "Template:Peking/NavBar"

Line 38: Line 38:
  
 
<body>
 
<body>
 +
 +
<!-- Simple header with fixed tabs. -->
 +
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
 +
            mdl-layout--fixed-tabs">
 +
    <header class="mdl-layout__header">
 +
        <div class="mdl-layout__header-row">
 +
            <!-- Title -->
 +
            <span class="mdl-layout-title">Title</span>
 +
        </div>
 +
        <!-- Tabs -->
 +
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
 +
            <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
 +
            <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
 +
            <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
 +
        </div>
 +
    </header>
 +
    <div class="mdl-layout__drawer">
 +
        <span class="mdl-layout-title">Title</span>
 +
    </div>
 +
    <main class="mdl-layout__content">
 +
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
 +
            <div class="page-content"><!-- Your content goes here --></div>
 +
        </section>
 +
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
 +
            <div class="page-content"><!-- Your content goes here --></div>
 +
        </section>
 +
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
 +
            <div class="page-content"><!-- Your content goes here --></div>
 +
        </section>
 +
    </main>
 +
</div>
  
 
<!-- Wide card with share menu button -->
 
<!-- Wide card with share menu button -->

Revision as of 15:15, 16 October 2017

Title
Title

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...