1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 17 18 <title>paper-dropdown-menu demo</title> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 23 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 24 <link rel="import" href="../../paper-item/paper-item.html"> 25 <link rel="import" href="../../paper-listbox/paper-listbox.html"> 26 <link rel="import" href="../../paper-tabs/paper-tabs.html"> 27 <link rel="import" href="../paper-dropdown-menu.html"> 28 <link rel="import" href="../paper-dropdown-menu-light.html"> 29 30 <style is="custom-style" include="demo-pages-shared-styles"> 31 paper-tabs { 32 width: 400px; 33 } 34 35 .vertical-section-container { 36 max-width: 500px; 37 } 38 39 paper-dropdown-menu { 40 width: 200px; 41 margin-right: 20px; 42 } 43 </style> 44 45 </head> 46 <body unresolved> 47 <div class="vertical-section-container centered"> 48 <h4>This is a plain paper-dropdown-menu</h4> 49 <demo-snippet class="centered-demo"> 50 <template> 51 <paper-dropdown-menu label="Dinosaurs"> 52 <paper-listbox class="dropdown-content"> 53 <paper-item>allosaurus</paper-item> 54 <paper-item>brontosaurus</paper-item> 55 <paper-item>carcharodontosaurus</paper-item> 56 <paper-item>diplodocus</paper-item> 57 </paper-listbox> 58 </paper-dropdown-menu> 59 60 <paper-dropdown-menu-light label="Dinosaurs (light)"> 61 <paper-listbox class="dropdown-content"> 62 <paper-item>allosaurus</paper-item> 63 <paper-item>brontosaurus</paper-item> 64 <paper-item>carcharodontosaurus</paper-item> 65 <paper-item>diplodocus</paper-item> 66 </paper-listbox> 67 </paper-dropdown-menu-light> 68 </template> 69 </demo-snippet> 70 71 <h4>You can pre-select a value using the <i>selected</i> attribute</h4> 72 <demo-snippet class="centered-demo"> 73 <template> 74 <paper-dropdown-menu label="Dinosaurs"> 75 <paper-listbox class="dropdown-content" selected="1"> 76 <paper-item>allosaurus</paper-item> 77 <paper-item>brontosaurus</paper-item> 78 <paper-item>carcharodontosaurus</paper-item> 79 <paper-item>diplodocus</paper-item> 80 </paper-listbox> 81 </paper-dropdown-menu> 82 83 <paper-dropdown-menu-light label="Dinosaurs (light)"> 84 <paper-listbox class="dropdown-content" selected="1"> 85 <paper-item>allosaurus</paper-item> 86 <paper-item>brontosaurus</paper-item> 87 <paper-item>carcharodontosaurus</paper-item> 88 <paper-item>diplodocus</paper-item> 89 </paper-listbox> 90 </paper-dropdown-menu-light> 91 </template> 92 </demo-snippet> 93 94 <h4>You can change the direction in which the menu opens</h4> 95 <demo-snippet class="centered-demo"> 96 <template> 97 <paper-dropdown-menu label="Upwards and to the left!" vertical-align="bottom" horizontal-align="left"> 98 <paper-listbox class="dropdown-content"> 99 <paper-item>allosaurus</paper-item> 100 <paper-item>brontosaurus</paper-item> 101 <paper-item>carcharodontosaurus</paper-item> 102 <paper-item>diplodocus</paper-item> 103 </paper-listbox> 104 </paper-dropdown-menu> 105 106 <paper-dropdown-menu-light label="Upwards and to the left! (light)" vertical-align="bottom" horizontal-align="left"> 107 <paper-listbox class="dropdown-content"> 108 <paper-item>allosaurus</paper-item> 109 <paper-item>brontosaurus</paper-item> 110 <paper-item>carcharodontosaurus</paper-item> 111 <paper-item>diplodocus</paper-item> 112 </paper-listbox> 113 </paper-dropdown-menu-light> 114 </template> 115 </demo-snippet> 116 117 118 <h4>A paper-dropdown-menu can be disabled</h4> 119 <demo-snippet class="centered-demo"> 120 <template> 121 <paper-dropdown-menu label="Disabled dinosaurs" disabled> 122 <paper-listbox class="dropdown-content"> 123 <paper-item>allosaurus</paper-item> 124 <paper-item>brontosaurus</paper-item> 125 <paper-item>carcharodontosaurus</paper-item> 126 <paper-item>diplodocus</paper-item> 127 </paper-listbox> 128 </paper-dropdown-menu> 129 130 <paper-dropdown-menu-light label="Disabled dinosaurs (light)" disabled> 131 <paper-listbox class="dropdown-content"> 132 <paper-item>allosaurus</paper-item> 133 <paper-item>brontosaurus</paper-item> 134 <paper-item>carcharodontosaurus</paper-item> 135 <paper-item>diplodocus</paper-item> 136 </paper-listbox> 137 </paper-dropdown-menu-light> 138 </template> 139 </demo-snippet> 140 141 <!-- TODO(noms): enable this demo when the webcomponentsjs bug is fixed --> 142 <!-- <h4>Here is an example of a long, scrolling menu, using a <i>dom-repeat</i></h4> 143 <demo-snippet class="centered-demo"> 144 <template> 145 <template is="dom-bind" id="Demo"> 146 <paper-dropdown-menu label="Dinosaurs"> 147 <paper-listbox class="dropdown-content"> 148 <template is="dom-repeat" items='[[dinosaurs]]' as="dinosaur"> 149 <paper-item>[[dinosaur]]</paper-item> 150 </template> 151 </paper-listbox> 152 </paper-dropdown-menu> 153 </template> 154 </template> 155 </demo-snippet> --> 156 157 <h4>A paper-dropdown-menu can contain any kind of content, such as tabs</h4> 158 <demo-snippet class="centered-demo"> 159 <template> 160 <paper-dropdown-menu label="Menu tabs!?"> 161 <paper-tabs class="dropdown-content"> 162 <paper-tab>cheddar</paper-tab> 163 <paper-tab>stilton</paper-tab> 164 <paper-tab>emmental</paper-tab> 165 </paper-tabs> 166 </paper-dropdown-menu> 167 168 <paper-dropdown-menu-light label="Menu tabs!? (light)"> 169 <paper-tabs class="dropdown-content"> 170 <paper-tab>cheddar</paper-tab> 171 <paper-tab>stilton</paper-tab> 172 <paper-tab>emmental</paper-tab> 173 </paper-tabs> 174 </paper-dropdown-menu-light> 175 </template> 176 </demo-snippet> 177 178 <h4>You can remove the ripple and the animations</h4> 179 <demo-snippet class="centered-demo"> 180 <template> 181 <paper-dropdown-menu label="Dinosaurs" noink no-animations> 182 <paper-listbox class="dropdown-content"> 183 <paper-item>allosaurus</paper-item> 184 <paper-item>brontosaurus</paper-item> 185 <paper-item>carcharodontosaurus</paper-item> 186 <paper-item>diplodocus</paper-item> 187 </paper-listbox> 188 </paper-dropdown-menu> 189 190 <paper-dropdown-menu-light label="Dinosaurs (light)" noink no-animations> 191 <paper-listbox class="dropdown-content"> 192 <paper-item>allosaurus</paper-item> 193 <paper-item>brontosaurus</paper-item> 194 <paper-item>carcharodontosaurus</paper-item> 195 <paper-item>diplodocus</paper-item> 196 </paper-listbox> 197 </paper-dropdown-menu-light> 198 </template> 199 </demo-snippet> 200 201 <h4>You can style a paper-dropdown-menu using custom properties</h4> 202 <demo-snippet class="centered-demo"> 203 <template> 204 <style is="custom-style"> 205 paper-dropdown-menu.custom { 206 --paper-input-container-label: { 207 color: var(--paper-pink-500); 208 font-style: italic; 209 text-align: center; 210 font-weight: bold; 211 }; 212 --paper-input-container-input: { 213 color: var(--paper-indigo-500); 214 font-style: normal; 215 font-family: serif; 216 text-transform: uppercase; 217 } 218 /* no underline */ 219 --paper-input-container-underline: { 220 display: none; 221 }; 222 } 223 224 paper-dropdown-menu-light.custom { 225 --paper-dropdown-menu-label: { 226 color: var(--paper-pink-500); 227 font-style: italic; 228 text-align: center; 229 font-weight: bold; 230 }; 231 --paper-dropdown-menu-input: { 232 color: var(--paper-indigo-500); 233 font-style: normal; 234 font-family: serif; 235 text-transform: uppercase; 236 /* no underline */ 237 border-bottom: none; 238 } 239 } 240 </style> 241 <paper-dropdown-menu class="custom" label="Custom" no-label-float> 242 <paper-listbox class="dropdown-content"> 243 <paper-item>allosaurus</paper-item> 244 <paper-item>brontosaurus</paper-item> 245 <paper-item>carcharodontosaurus</paper-item> 246 <paper-item>diplodocus</paper-item> 247 </paper-listbox> 248 </paper-dropdown-menu> 249 250 <paper-dropdown-menu-light class="custom" label="Custom (light)" no-label-float> 251 <paper-listbox class="dropdown-content"> 252 <paper-item>allosaurus</paper-item> 253 <paper-item>brontosaurus</paper-item> 254 <paper-item>carcharodontosaurus</paper-item> 255 <paper-item>diplodocus</paper-item> 256 </paper-listbox> 257 </paper-dropdown-menu-light> 258 </template> 259 </demo-snippet> 260 </div> 261 262 <script> 263 // document.addEventListener('WebComponentsReady', function() { 264 // Demo.dinosaurs = [ 265 // 'allosaurus', 266 // 'brontosaurus', 267 // 'carcharodontosaurus', 268 // 'diplodocus', 269 // 'ekrixinatosaurus', 270 // 'fukuiraptor', 271 // 'gallimimus', 272 // 'hadrosaurus', 273 // 'iguanodon', 274 // 'jainosaurus', 275 // 'kritosaurus', 276 // 'liaoceratops', 277 // 'megalosaurus', 278 // 'nemegtosaurus', 279 // 'ornithomimus', 280 // 'protoceratops', 281 // 'quetecsaurus', 282 // 'rajasaurus', 283 // 'stegosaurus', 284 // 'triceratops', 285 // 'utahraptor', 286 // 'vulcanodon', 287 // 'wannanosaurus', 288 // 'xenoceratops', 289 // 'yandusaurus', 290 // 'zephyrosaurus' 291 // ]; 292 // }); 293 </script> 294 </body> 295 </html> 296
