demo.html

<!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>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <title>paper-dropdown-menu</title>

  <script src="../webcomponentsjs/webcomponents.js"></script>

  <link href="../core-collapse/core-collapse.html" rel="import">
  <link href="../core-menu/core-menu.html" rel="import">
  <link href="../paper-dropdown/paper-dropdown.html" rel="import">
  <link href="../paper-item/paper-item.html" rel="import">

  <link href="paper-dropdown-menu.html" rel="import">

  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      font-size: 14px;
      margin: 0;
      padding: 24px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      -webkit-touch-callout: none;
    }

    section {
      padding: 20px 0;
    }

    section > div {
      padding: 14px;
      font-size: 16px;
    }

    html /deep/ paper-dropdown-menu {
      box-sizing: border-box;
      width: 170px;
    }

    html /deep/ core-menu {
      box-sizing: border-box;
      width: 170px;
    }

    paper-item {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    html /deep/ core-collapse {
      border: 1px solid #ccc;
      padding: 8px;
    }

    html /deep/ core-overlay {
      border: 1px solid #ccc;
      padding: 8px;
      background: #fff;
    }

    .constrained-height {
      height: 150px;
    }

    .colored {
      color: #0f9d58;
    }

    .dropdown.colored::shadow #ripple,
    .dropdown.colored::shadow #background {
      border: 1px solid #0f9d58;
      background-color: #b7e1cd;
    }

  </style>

</head>
<body>

  <template is="auto-binding">

    <section>

      <div>Absolutely positioned dropdowns</div>

      <paper-dropdown-menu label="Your favorite pastry">
        <paper-dropdown class="dropdown">
          <core-menu class="menu">
            <template repeat="{{pastries}}">
              <paper-item>{{}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-dropdown-menu>

      <br><br>

      <paper-dropdown-menu label="Disabled" disabled>
        <paper-dropdown class="dropdown">
          <core-menu class="menu">
            <paper-item>Should not see this</paper-item>
          </core-menu>
        </paper-dropdown>
      </paper-dropdown-menu>

    </section>

    <section>

      <div>Layered dropdowns</div>

      <button onclick="document.getElementById('overlay').toggle()">toggle core-overlay</button>

      <core-overlay id="overlay">

        <paper-dropdown-menu label="Your favorite pastry">
          <paper-dropdown layered class="dropdown">
            <core-menu class="menu">
              <template repeat="{{pastries}}">
                <paper-item>{{}}</paper-item>
              </template>
            </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>

      </core-overlay>

      <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>

      <br>

      <core-collapse id="collapse">

        <paper-dropdown-menu label="Your favorite pastry">
          <paper-dropdown layered class="dropdown">
            <core-menu class="menu">
              <template repeat="{{pastries}}">
                <paper-item>{{}}</paper-item>
              </template>
            </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>

      </core-collapse>

    </section>

    <section>

      <div>Custom styling</div>

      <paper-dropdown-menu label="Constrained height">
        <paper-dropdown class="dropdown constrained-height">
          <core-menu class="menu">
            <template repeat="{{pastries}}">
              <paper-item>{{}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-dropdown-menu>

      <br><br>

      <paper-dropdown-menu label="Colored">
        <paper-dropdown class="dropdown colored">
          <core-menu class="menu">
            <template repeat="{{pastries}}">
              <paper-item>{{}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-dropdown-menu>

    </section>

  </template>

  <script>

    scope = document.querySelector('template[is=auto-binding]');

    scope.pastries = [
      'Apple fritter',
      'Croissant',
      'Donut',
      'Financier',
      'Jello',
      'Madeleine',
      'Pound cake',
      'Pretzel',
      'Sfogliatelle'
    ];

  </script>

</body>
</html>