UNPKG

api-console-assets

Version:

This repo only exists to publish api console components to npm

55 lines (47 loc) 3.06 kB
# Anypoint styled version of the `paper-dropdown-menu` element. To be used with the API Console that must be styled for the platform. 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` 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-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`](paper-listbox), or any other or element that acts like an [`iron-selector`](iron-selector). Specifically, the menu child must fire an [`iron-select`](iron-selector#event-iron-select) event when one of its children is selected, and an [`iron-deselect`](iron-selector#event-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. ### Styling 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-disabled-opacity` | The opacity of the dropdown when disabled | `0.33` `--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-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 | `{}` `--paper-dropdown-menu-border-color` | Color of the border of the dropdown when opened | `#cacbcc` `--paper-dropdown-menu-label-opened-color` | Color of the label when opened | `rgba(0, 0, 0, 0.24)`