Difference between revisions of "Template:Peking/NavBar"

Line 19: Line 19:
  
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 +
action=raw&ctype=text/javascript"></script>
 +
    <link href="https://2017.igem.org/Template:Peking/mdl/component?action=raw&ctype=text/css" rel="stylesheet">
 +
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/componentjs?action=raw&ctype=text/javascript"></script>
  
−
     <link rel="stylesheet" type="text/css"
+
     <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
−
          href="https://2017.igem.org/Template:Peking/mdl/MDLnew?action=raw&ctype=text/css">
+
  
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Peking/mdl/main?action=raw&ctype=text/css">
 +
    <!-- Fonts -->
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Peking/mdl/fonts?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Peking/mdl/icon?action=raw&ctype=text/css">
  
−
    <script type="text/javascript" src="https://2017.igem.org/Template:Peking/mdl/materialminjs?
 
−
action=raw&ctype=text/javascript"></script>
 
  
  
Line 55: Line 60:
 
         </div>
 
         </div>
 
     </header>
 
     </header>
 +
 +
 +
    <div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
 +
        <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
 +
 +
            <a href="https://getmdl.io/components/index.html#badges-section"
 +
              class="mdl-components__link mdl-component badges">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_badges.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Badges</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#buttons-section"
 +
              class="mdl-components__link mdl-component buttons">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_buttons.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Buttons</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#cards-section"
 +
              class="mdl-components__link mdl-component cards">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_cards.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Cards</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#chips-section"
 +
              class="mdl-components__link mdl-component chips">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_chips.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Chips</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#dialog-section"
 +
              class="mdl-components__link mdl-component dialog">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_dialog.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Dialogs</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#layout-section"
 +
              class="mdl-components__link mdl-component layout">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_layout.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Layout</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#lists-section"
 +
              class="mdl-components__link mdl-component lists">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_lists.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Lists</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#loading-section"
 +
              class="mdl-components__link mdl-component loading">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_loading.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Loading</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#menus-section"
 +
              class="mdl-components__link mdl-component menus">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_menus.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Menus</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#sliders-section"
 +
              class="mdl-components__link mdl-component sliders">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_sliders.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Sliders</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#snackbar-section"
 +
              class="mdl-components__link mdl-component snackbar">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_snackbar.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Snackbar</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#toggles-section"
 +
              class="mdl-components__link mdl-component toggles">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_toggles.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Toggles</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#tables-section"
 +
              class="mdl-components__link mdl-component tables">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_tables.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Tables</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#textfields-section"
 +
              class="mdl-components__link mdl-component textfields">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_textfields.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Text Fields</span>
 +
            </a>
 +
 +
            <a href="https://getmdl.io/components/index.html#tooltips-section"
 +
              class="mdl-components__link mdl-component tooltips">
 +
                <div class="mdl-components__link-image"
 +
                    style="background-image: url(&#39;../assets/comp_tooltips.png&#39;)">
 +
                </div>
 +
                <span class="mdl-components__link-text">Tooltips</span>
 +
            </a>
 +
 +
        </aside>
 +
 +
    </div>
  
 
     <main class="mdl-layout__content">
 
     <main class="mdl-layout__content">
 
         <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
 
         <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
−
             <div class="page-content"><!-- Your content goes here --></div>
+
             <div class="page-content">
 +
 
 +
 
 +
 
 +
            </div>
 
         </section>
 
         </section>
 
         <section class="mdl-layout__tab-panel" id="fixed-tab-2">
 
         <section class="mdl-layout__tab-panel" id="fixed-tab-2">
Line 69: Line 206:
 
</div>
 
</div>
  
−
<!-- Wide card with share menu button -->
 
−
<style>
 
−
    .demo-card-wide.mdl-card {
 
−
        width: 512px;
 
−
    }
 
−
    .demo-card-wide > .mdl-card__title {
 
−
        color: #fff;
 
−
        height: 176px;
 
−
        background: url('../assets/demos/welcome_card.jpg') center / cover;
 
−
    }
 
−
    .demo-card-wide > .mdl-card__menu {
 
−
        color: #fff;
 
−
    }
 
−
</style>
 
  
−
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
 
−
    <div class="mdl-card__title">
 
−
        <h2 class="mdl-card__title-text">Welcome</h2>
 
−
    </div>
 
−
    <div class="mdl-card__supporting-text">
 
−
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
−
        Mauris sagittis pellentesque lacus eleifend lacinia...
 
−
    </div>
 
−
    <div class="mdl-card__actions mdl-card--border">
 
−
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
 
−
            Get Started
 
−
        </a>
 
−
    </div>
 
−
    <div class="mdl-card__menu">
 
−
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
 
−
            <i class="material-icons">share</i>
 
−
        </button>
 
−
    </div>
 
−
</div>
 
  
−
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
  
−
222222
+
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:40, 16 October 2017

Title
Tab 1 Tab 2 Tab 3