| <!-- |
| @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><link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> |
| <link rel="import" href="../iron-behaviors/iron-button-state.html"> |
| <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
| <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> |
| <link rel="import" href="../iron-icon/iron-icon.html"> |
| <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html"> |
| <link rel="import" href="../paper-input/paper-input.html"> |
| <link rel="import" href="../paper-menu-button/paper-menu-button.html"> |
| <link rel="import" href="../paper-ripple/paper-ripple.html"> |
| <link rel="import" href="../paper-styles/default-theme.html"> |
| |
| <link rel="import" href="paper-dropdown-menu-icons.html"> |
| <link rel="import" href="paper-dropdown-menu-shared-styles.html"> |
| |
| <!-- |
| Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons) |
| |
| `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`](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-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. |
| |
| @group Paper Elements |
| @element paper-dropdown-menu |
| @hero hero.svg |
| @demo demo/index.html |
| --> |
| |
| </head><body><dom-module id="paper-dropdown-menu"> |
| <template> |
| <style include="paper-dropdown-menu-shared-styles"></style> |
| |
| <!-- this div fulfills an a11y requirement for combobox, do not remove --> |
| <div role="button"></div> |
| <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}"> |
| <div class="dropdown-trigger"> |
| <paper-ripple></paper-ripple> |
| <!-- paper-input has type="text" for a11y, do not remove --> |
| <paper-input type="text" invalid="[[invalid]]" readonly="" disabled="[[disabled]]" value="[[selectedItemLabel]]" placeholder="[[placeholder]]" error-message="[[errorMessage]]" always-float-label="[[alwaysFloatLabel]]" no-label-float="[[noLabelFloat]]" label="[[label]]"> |
| <iron-icon icon="paper-dropdown-menu:arrow-drop-down" suffix=""></iron-icon> |
| </paper-input> |
| </div> |
| <content id="content" select=".dropdown-content"></content> |
| </paper-menu-button> |
| </template> |
| |
| </dom-module> |
| <script src="paper-dropdown-menu-extracted.js"></script></body></html> |
