Skip to content

Instantly share code, notes, and snippets.

@netanelgilad

netanelgilad/demo.html

Created July 11, 2014 13:49
Download ZIP

Revisions

  1. netanelgilad created this gist Jul 11, 2014.
    116 changes: 116 additions & 0 deletions demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!doctype html>
    <!--
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
    -->
    <html>
    <head>
    <title>core-drawer-panel</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <script src="../platform/platform.js"></script>

    <link rel="import" href="core-drawer-panel.html">

    <style>

    html, body {
    height: 100%;
    margin: 0;
    }

    body {
    font-family: sans-serif;
    color: #FFF;
    }

    [drawer] {
    background-color: #B99588;
    border-right: 1px solid #ccc;
    }

    [main] {
    height: 100%;
    background-color: #4F7DC9;
    }

    button {
    display: none;
    width: 160px;
    height: 40px;
    font-size: 16px;
    margin: 8px;
    }

    core-drawer-panel[narrow] button {
    display: inline-block
    }

    .red {
    height: 100px;
    background-color: red;
    }

    .blue {
    height: 100px;
    background-color: blue;
    }

    </style>

    </head>

    <body unresolved touch-action="auto">

    <core-drawer-panel>

    <div drawer>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    </div>

    <div main>
    <button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
    <div class="blue"></div>
    </div>

    </core-drawer-panel>

    </body>
    </html>