Difference between revisions of "Template:Peking/NavBar"

Line 215: Line 215:
  
 
<body>
 
<body>
−
 
+
<!-- Simple header with fixed tabs. -->
−
<style>
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
−
.demo-card-wide.mdl-card {
+
            mdl-layout--fixed-tabs">
−
  width: 512px;
+
    <header class="mdl-layout__header">
−
}
+
        <div class="mdl-layout__header-row">
−
.demo-card-wide > .mdl-card__title {
+
            <!-- Title -->
−
  color: #fff;
+
            <span class="mdl-layout-title">Title</span>
−
  height: 176px;
+
        </div>
−
  background: url('../assets/demos/welcome_card.jpg') center / cover;
+
        <!-- Tabs -->
−
}
+
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
−
.demo-card-wide > .mdl-card__menu {
+
            <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
−
  color: #fff;
+
            <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
−
}
+
            <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
−
</style>
+
        </div>
−
 
+
    </header>
−
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
+
    <div class="mdl-layout__drawer">
−
  <div class="mdl-card__title">
+
        <span class="mdl-layout-title">Title</span>
−
    <h2 class="mdl-card__title-text">Welcome</h2>
+
     </div>
−
  </div>
+
    <main class="mdl-layout__content">
−
  <div class="mdl-card__supporting-text">
+
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
−
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
            <div class="page-content"><!-- Your content goes here --></div>
−
    Mauris sagittis pellentesque lacus eleifend lacinia...
+
        </section>
−
  </div>
+
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
−
  <div class="mdl-card__actions mdl-card--border">
+
            <div class="page-content"><!-- Your content goes here --></div>
−
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+
        </section>
−
      Get Started
+
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
−
    </a>
+
            <div class="page-content"><!-- Your content goes here --></div>
−
  </div>
+
        </section>
−
  <div class="mdl-card__menu">
+
    </main>
−
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+
−
      <i class="material-icons">share</i>
+
−
    </button>
+
−
  </div>
+
 
</div>
 
</div>
−
 
−
<form action="#">
 
−
  <div class="mdl-textfield mdl-js-textfield">
 
−
    <input class="mdl-textfield__input" type="text" id="sample1">
 
−
    <label class="mdl-textfield__label" for="sample1">Text...</label>
 
−
  </div>
 
−
</form>
 
−
<!-- Numeric Textfield -->
 
−
<form action="#">
 
−
  <div class="mdl-textfield mdl-js-textfield">
 
−
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
 
−
    <label class="mdl-textfield__label" for="sample2">Number...</label>
 
−
    <span class="mdl-textfield__error">Input is not a number!</span>
 
−
  </div>
 
−
</form>
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:57, 16 October 2017

Title
Tab 1 Tab 2 Tab 3
Title