1 2<!--- 3 4This README is automatically generated from the comments in these files: 5paper-dropdown-menu-light.html paper-dropdown-menu.html 6 7Edit those files, and our readme bot will duplicate them over here! 8Edit this file, and the bot will squash your changes :) 9 10The bot does some handling of markdown. Please file a bug if it does the wrong 11thing! https://github.com/PolymerLabs/tedium/issues 12 13--> 14 15[](https://travis-ci.org/PolymerElements/paper-dropdown-menu) 16 17_[Demo and API docs](https://elements.polymer-project.org/elements/paper-dropdown-menu)_ 18 19 20##<paper-dropdown-menu> 21 22Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons) 23 24`paper-dropdown-menu` is similar to a native browser select element. 25`paper-dropdown-menu` works with selectable content. The currently selected 26item is displayed in the control. If no item is selected, the `label` is 27displayed instead. 28 29Example: 30 31```html 32<paper-dropdown-menu label="Your favourite pastry"> 33 <paper-listbox class="dropdown-content"> 34 <paper-item>Croissant</paper-item> 35 <paper-item>Donut</paper-item> 36 <paper-item>Financier</paper-item> 37 <paper-item>Madeleine</paper-item> 38 </paper-listbox> 39</paper-dropdown-menu> 40``` 41 42This example renders a dropdown menu with 4 options. 43 44The child element with the class `dropdown-content` is used as the dropdown 45menu. This can be a [`paper-listbox`](paper-listbox), or any other or 46element that acts like an [`iron-selector`](iron-selector). 47 48Specifically, the menu child must fire an 49[`iron-select`](iron-selector#event-iron-select) event when one of its 50children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect) 51event when a child is deselected. The selected or deselected item must 52be passed as the event's `detail.item` property. 53 54Applications can listen for the `iron-select` and `iron-deselect` events 55to react when options are selected and deselected. 56 57### Styling 58 59The following custom properties and mixins are also available for styling: 60 61| Custom property | Description | Default | 62| --- | --- | --- | 63| `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}` | 64| `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}` | 65| `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}` | 66| `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}` | 67| `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}` | 68| `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}` | 69 70You can also use any of the `paper-input-container` and `paper-menu-button` 71style mixins and custom properties to style the internal input and menu button 72respectively. 73 74 75 76##<paper-dropdown-menu-light> 77 78Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons) 79 80This is a faster, lighter version of `paper-dropdown-menu`, that does not 81use a `<paper-input>` internally. Use this element if you're concerned about 82the performance of this element, i.e., if you plan on using many dropdowns on 83the same page. Note that this element has a slightly different styling API 84than `paper-dropdown-menu`. 85 86`paper-dropdown-menu-light` is similar to a native browser select element. 87`paper-dropdown-menu-light` works with selectable content. The currently selected 88item is displayed in the control. If no item is selected, the `label` is 89displayed instead. 90 91Example: 92 93```html 94<paper-dropdown-menu-light label="Your favourite pastry"> 95 <paper-listbox class="dropdown-content"> 96 <paper-item>Croissant</paper-item> 97 <paper-item>Donut</paper-item> 98 <paper-item>Financier</paper-item> 99 <paper-item>Madeleine</paper-item> 100 </paper-listbox> 101</paper-dropdown-menu-light> 102``` 103 104This example renders a dropdown menu with 4 options. 105 106The child element with the class `dropdown-content` is used as the dropdown 107menu. This can be a [`paper-listbox`](paper-listbox), or any other or 108element that acts like an [`iron-selector`](iron-selector). 109 110Specifically, the menu child must fire an 111[`iron-select`](iron-selector#event-iron-select) event when one of its 112children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect) 113event when a child is deselected. The selected or deselected item must 114be passed as the event's `detail.item` property. 115 116Applications can listen for the `iron-select` and `iron-deselect` events 117to react when options are selected and deselected. 118 119### Styling 120 121The following custom properties and mixins are also available for styling: 122 123| Custom property | Description | Default | 124| --- | --- | --- | 125| `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}` | 126| `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}` | 127| `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}` | 128| `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}` | 129| `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}` | 130| `--paper-dropdown-menu-disabled-opacity` | The opacity of the dropdown when disabled | `0.33` | 131| `--paper-dropdown-menu-color` | The color of the input/label/underline when the dropdown is unfocused | `--primary-text-color` | 132| `--paper-dropdown-menu-focus-color` | The color of the label/underline when the dropdown is focused | `--primary-color` | 133| `--paper-dropdown-error-color` | The color of the label/underline when the dropdown is invalid | `--error-color` | 134| `--paper-dropdown-menu-label` | Mixin applied to the label | `{}` | 135| `--paper-dropdown-menu-input` | Mixin appled to the input | `{}` | 136 137Note that in this element, the underline is just the bottom border of the "input". 138To style it: 139 140```html 141<style is=custom-style> 142 paper-dropdown-menu-light.custom { 143 --paper-dropdown-menu-input: { 144 border-bottom: 2px dashed lavender; 145 }; 146</style> 147``` 148 149 150
){kind=link}