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