| <!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-demo-helpers/demo-snippet.html"> |
| <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> |
| <link rel="import" href="../../paper-item/paper-item.html"> |
| <link rel="import" href="../../paper-listbox/paper-listbox.html"> |
| <link rel="import" href="../../paper-tabs/paper-tabs.html"> |
| <link rel="import" href="../paper-dropdown-menu.html"> |
| <link rel="import" href="../paper-dropdown-menu-light.html"> |
| |
| <style is="custom-style" include="demo-pages-shared-styles"> |
| paper-tabs { |
| width: 400px; |
| } |
| |
| .vertical-section-container { |
| max-width: 500px; |
| } |
| |
| paper-dropdown-menu { |
| width: 200px; |
| margin-right: 20px; |
| } |
| </style> |
| |
| </head> |
| <body unresolved> |
| <div class="vertical-section-container centered"> |
| <h4>This is a plain paper-dropdown-menu</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Dinosaurs"> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Dinosaurs (light)"> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| <h4>You can pre-select a value using the <i>selected</i> attribute</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Dinosaurs"> |
| <paper-listbox class="dropdown-content" selected="1"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Dinosaurs (light)"> |
| <paper-listbox class="dropdown-content" selected="1"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| <h4>You can change the direction in which the menu opens</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Upwards and to the left!" vertical-align="bottom" horizontal-align="left"> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Upwards and to the left! (light)" vertical-align="bottom" horizontal-align="left"> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| |
| <h4>A paper-dropdown-menu can be disabled</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Disabled dinosaurs" disabled> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Disabled dinosaurs (light)" disabled> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| <!-- TODO(noms): enable this demo when the webcomponentsjs bug is fixed --> |
| <!-- <h4>Here is an example of a long, scrolling menu, using a <i>dom-repeat</i></h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <template is="dom-bind" id="Demo"> |
| <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> |
| </template> |
| </template> |
| </demo-snippet> --> |
| |
| <h4>A paper-dropdown-menu can contain any kind of content, such as tabs</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Menu tabs!?"> |
| <paper-tabs class="dropdown-content"> |
| <paper-tab>cheddar</paper-tab> |
| <paper-tab>stilton</paper-tab> |
| <paper-tab>emmental</paper-tab> |
| </paper-tabs> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Menu tabs!? (light)"> |
| <paper-tabs class="dropdown-content"> |
| <paper-tab>cheddar</paper-tab> |
| <paper-tab>stilton</paper-tab> |
| <paper-tab>emmental</paper-tab> |
| </paper-tabs> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| <h4>You can remove the ripple and the animations</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <paper-dropdown-menu label="Dinosaurs" noink no-animations> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light label="Dinosaurs (light)" noink no-animations> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| |
| <h4>You can style a paper-dropdown-menu using custom properties</h4> |
| <demo-snippet class="centered-demo"> |
| <template> |
| <style is="custom-style"> |
| paper-dropdown-menu.custom { |
| --paper-input-container-label: { |
| color: var(--paper-pink-500); |
| font-style: italic; |
| text-align: center; |
| font-weight: bold; |
| }; |
| --paper-input-container-input: { |
| color: var(--paper-indigo-500); |
| font-style: normal; |
| font-family: serif; |
| text-transform: uppercase; |
| } |
| /* no underline */ |
| --paper-input-container-underline: { |
| display: none; |
| }; |
| } |
| |
| paper-dropdown-menu-light.custom { |
| --paper-dropdown-menu-label: { |
| color: var(--paper-pink-500); |
| font-style: italic; |
| text-align: center; |
| font-weight: bold; |
| }; |
| --paper-dropdown-menu-input: { |
| color: var(--paper-indigo-500); |
| font-style: normal; |
| font-family: serif; |
| text-transform: uppercase; |
| /* no underline */ |
| border-bottom: none; |
| } |
| } |
| </style> |
| <paper-dropdown-menu class="custom" label="Custom" no-label-float> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <paper-dropdown-menu-light class="custom" label="Custom (light)" no-label-float> |
| <paper-listbox class="dropdown-content"> |
| <paper-item>allosaurus</paper-item> |
| <paper-item>brontosaurus</paper-item> |
| <paper-item>carcharodontosaurus</paper-item> |
| <paper-item>diplodocus</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu-light> |
| </template> |
| </demo-snippet> |
| </div> |
| |
| <script> |
| // document.addEventListener('WebComponentsReady', function() { |
| // 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> |
