Difference between revisions of "Template:Peking/NavBar"

Line 204: Line 204:
  
 
<body>
 
<body>
−
<style>
+
<!-- The drawer is always open in large screens. The header is always shown,
−
    .demo-card-wide.mdl-card {
+
  even in small screens. -->
−
        width: 512px;
+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
−
    }
+
            mdl-layout--fixed-header">
−
 
+
  <header class="mdl-layout__header">
−
    .demo-card-wide > .mdl-card__title {
+
     <div class="mdl-layout__header-row">
−
        color: #fff;
+
      <div class="mdl-layout-spacer"></div>
−
        height: 176px;
+
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
−
        background: url('../assets/demos/welcome_card.jpg') center / cover;
+
                  mdl-textfield--floating-label mdl-textfield--align-right">
−
    }
+
        <label class="mdl-button mdl-js-button mdl-button--icon"
−
 
+
              for="fixed-header-drawer-exp">
−
    .demo-card-wide > .mdl-card__menu {
+
          <i class="material-icons">search</i>
−
        color: #fff;
+
         </label>
−
     }
+
        <div class="mdl-textfield__expandable-holder">
−
</style>
+
          <input class="mdl-textfield__input" type="text" name="sample"
−
 
+
                id="fixed-header-drawer-exp">
−
<div align="center">
+
        </div>
−
<div class="demo-card-wide mdl-card mdl-shadow--2dp" align="center">
+
      </div>
−
    <div class="mdl-card__title">
+
−
         <h2 class="mdl-card__title-text">Welcome</h2>
+
 
     </div>
 
     </div>
−
    <div class="mdl-card__supporting-text">
+
  </header>
−
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
  <div class="mdl-layout__drawer">
−
        Mauris sagittis pellentesque lacus eleifend lacinia...
+
     <span class="mdl-layout-title">Title</span>
−
     </div>
+
     <nav class="mdl-navigation">
−
     <div class="mdl-card__actions mdl-card--border">
+
      <a class="mdl-navigation__link" href="">Link</a>
−
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+
      <a class="mdl-navigation__link" href="">Link</a>
−
            Get Started
+
      <a class="mdl-navigation__link" href="">Link</a>
−
        </a>
+
      <a class="mdl-navigation__link" href="">Link</a>
−
    </div>
+
    </nav>
−
    <div class="mdl-card__menu">
+
  </div>
−
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+
  <main class="mdl-layout__content">
−
            <i class="material-icons">share</i>
+
    <div class="page-content"><!-- Your content goes here --></div>
−
        </button>
+
  </main>
−
    </div>
+
−
</div>
+
 
</div>
 
</div>
−
 
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 11:31, 15 October 2017

Title