index.html 5.99 KB
<!doctype html>
<!--
@license
Copyright (c) 2015 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 demo</title>

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

  <link rel="import" href="../../iron-icons/iron-icons.html">
  <link rel="import" href="../../iron-icon/iron-icon.html">
  <link rel="import" href="../../paper-listbox/paper-listbox.html">
  <link rel="import" href="../../paper-item/paper-item.html">
  <link rel="import" href="../../paper-button/paper-button.html">
  <link rel="import" href="../../paper-styles/demo-pages.html">
  <link rel="import" href="../../paper-tabs/paper-tabs.html">

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

  <style is="custom-style">
    paper-dropdown-menu {
      text-align: left;
      margin: auto;
      width: 180px;
    }

    paper-dropdown-menu.letters {
      width: 90px;
    }

    paper-tabs {
      width: 400px;
    }

    .horizontal-section {
      text-align: center;
    }

    .nounderline {
      --paper-input-container-underline: {
        display: none;
      };
    }
  </style>

</head>
<body>

  <template id="Demo" is="dom-bind">

    <div class="horizontal-section-container">
      <div>
        <h4>Basic Menu</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu label="Dinosaurs">
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                <paper-item>[[dinosaur]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>Pre-selected Value</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu label="Dinosaurs">
            <paper-listbox class="dropdown-content" selected="1">
              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                <paper-item>[[dinosaur]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>Disabled</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu disabled label="Disabled">
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[letters]]" as="letter">
                <paper-item>[[letter]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>Alternative Content</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu label="Menu tabs!?">
            <paper-tabs class="dropdown-content">
              <template is="dom-repeat" items="[[letters]]" as="letter">
                <paper-tab>[[letter]]</paper-tab>
              </template>
            </paper-tabs>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>No underline (menu from bottom)</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu class="nounderline" label="Letters" vertical-align="bottom">
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[letters]]" as="letter">
                <paper-item>[[letter]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>No Label Float</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu class="letters" label="Letters" no-label-float>
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[letters]]" as="letter">
                <paper-item>[[letter]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

    <div class="horizontal-section-container">
      <div>
        <h4>No Ripple, No Animations</h4>
        <div class="horizontal-section">
          <paper-dropdown-menu label="Dinosaurs" noink no-animations>
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
                <paper-item>[[dinosaur]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>
      </div>
    </div>

  </template>

  <script>
    Demo.letters = [
      'alpha',
      'beta',
      'gamma',
      'delta',
      'epsilon'
    ];
    Demo.dinosaurs = [
      'allosaurus',
      'brontosaurus',
      'carcharodontosaurus',
      'diplodocus',
      'ekrixinatosaurus',
      'fukuiraptor',
      'gallimimus',
      'hadrosaurus',
      'iguanodon',
      'jainosaurus',
      'kritosaurus',
      'liaoceratops',
      'megalosaurus',
      'nemegtosaurus',
      'ornithomimus',
      'protoceratops',
      'quetecsaurus',
      'rajasaurus',
      'stegosaurus',
      'triceratops',
      'utahraptor',
      'vulcanodon',
      'wannanosaurus',
      'xenoceratops',
      'yandusaurus',
      'zephyrosaurus'
    ];
  </script>

</body>
</html>