##<paper-dropdown-menu>
Material design: Dropdown menus
paper-dropdown-menu
is similar to a native browser select element. paper-dropdown-menu
works with selectable content. The currently selected item is displayed in the control. If no item is selected, the label
is displayed instead.
Example:
<paper-dropdown-menu label="Your favourite pastry"> <paper-listbox class="dropdown-content"> <paper-item>Croissant</paper-item> <paper-item>Donut</paper-item> <paper-item>Financier</paper-item> <paper-item>Madeleine</paper-item> </paper-listbox> </paper-dropdown-menu>
This example renders a dropdown menu with 4 options.
The child element with the class dropdown-content
is used as the dropdown menu. This can be a paper-listbox
, or any other or element that acts like an iron-selector
.
Specifically, the menu child must fire an iron-select
event when one of its children is selected, and an iron-deselect
event when a child is deselected. The selected or deselected item must be passed as the event's detail.item
property.
Applications can listen for the iron-select
and iron-deselect
events to react when options are selected and deselected.
The following custom properties and mixins are also available for styling:
Custom property | Description | Default |
---|---|---|
--paper-dropdown-menu | A mixin that is applied to the element host | {} |
--paper-dropdown-menu-disabled | A mixin that is applied to the element host when disabled | {} |
--paper-dropdown-menu-ripple | A mixin that is applied to the internal ripple | {} |
--paper-dropdown-menu-button | A mixin that is applied to the internal menu button | {} |
--paper-dropdown-menu-input | A mixin that is applied to the internal paper input | {} |
--paper-dropdown-menu-icon | A mixin that is applied to the internal icon | {} |
You can also use any of the paper-input-container
and paper-menu-button
style mixins and custom properties to style the internal input and menu button respectively.
##<paper-dropdown-menu-light>
Material design: Dropdown menus
This is a faster, lighter version of paper-dropdown-menu
, that does not use a <paper-input>
internally. Use this element if you're concerned about the performance of this element, i.e., if you plan on using many dropdowns on the same page. Note that this element has a slightly different styling API than paper-dropdown-menu
.
paper-dropdown-menu-light
is similar to a native browser select element. paper-dropdown-menu-light
works with selectable content. The currently selected item is displayed in the control. If no item is selected, the label
is displayed instead.
Example:
<paper-dropdown-menu-light label="Your favourite pastry"> <paper-listbox class="dropdown-content"> <paper-item>Croissant</paper-item> <paper-item>Donut</paper-item> <paper-item>Financier</paper-item> <paper-item>Madeleine</paper-item> </paper-listbox> </paper-dropdown-menu-light>
This example renders a dropdown menu with 4 options.
The child element with the class dropdown-content
is used as the dropdown menu. This can be a paper-listbox
, or any other or element that acts like an iron-selector
.
Specifically, the menu child must fire an iron-select
event when one of its children is selected, and an iron-deselect
event when a child is deselected. The selected or deselected item must be passed as the event's detail.item
property.
Applications can listen for the iron-select
and iron-deselect
events to react when options are selected and deselected.
The following custom properties and mixins are also available for styling:
Custom property | Description | Default |
---|---|---|
--paper-dropdown-menu | A mixin that is applied to the element host | {} |
--paper-dropdown-menu-disabled | A mixin that is applied to the element host when disabled | {} |
--paper-dropdown-menu-ripple | A mixin that is applied to the internal ripple | {} |
--paper-dropdown-menu-button | A mixin that is applied to the internal menu button | {} |
--paper-dropdown-menu-icon | A mixin that is applied to the internal icon | {} |
--paper-dropdown-menu-disabled-opacity | The opacity of the dropdown when disabled | 0.33 |
--paper-dropdown-menu-color | The color of the input/label/underline when the dropdown is unfocused | --primary-text-color |
--paper-dropdown-menu-focus-color | The color of the label/underline when the dropdown is focused | --primary-color |
--paper-dropdown-error-color | The color of the label/underline when the dropdown is invalid | --error-color |
--paper-dropdown-menu-label | Mixin applied to the label | {} |
--paper-dropdown-menu-input | Mixin appled to the input | {} |
Note that in this element, the underline is just the bottom border of the “input”. To style it:
<style is=custom-style> paper-dropdown-menu-light.custom { --paper-dropdown-menu-input: { border-bottom: 2px dashed lavender; }; </style>