third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/default-theme.html">
  11 <link rel="import" href="../paper-input/paper-input.html">
  12 <link rel="import" href="../paper-menu-button/paper-menu-button.html">
  13 <link rel="import" href="../paper-ripple/paper-ripple.html">
  14 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  15 <link rel="import" href="../iron-behaviors/iron-control-state.html">
  16 <link rel="import" href="../iron-behaviors/iron-button-state.html">
  17 <link rel="import" href="../iron-icons/iron-icons.html">
  18 <link rel="import" href="../iron-icon/iron-icon.html">
  19 <link rel="import" href="../iron-selector/iron-selectable.html">
  20
  21 <!--
  22 `paper-dropdown-menu` is similar to a native browser select element.
  23 `paper-dropdown-menu` works with selectable content. The currently selected
  24 item is displayed in the control. If no item is selected, the `label` is
  25 displayed instead.
  26
  27 The child element with the class `dropdown-content` will be used as the dropdown
  28 menu. It could be a `paper-menu` or element that triggers `iron-select` when
  29 selecting its children.
  30
  31 Example:
  32
  33     <paper-dropdown-menu label="Your favourite pastry">
  34       <paper-menu class="dropdown-content">
  35         <paper-item>Croissant</paper-item>
  36         <paper-item>Donut</paper-item>
  37         <paper-item>Financier</paper-item>
  38         <paper-item>Madeleine</paper-item>
  39       </paper-menu>
  40     </paper-dropdown-menu>
  41
  42 This example renders a dropdown menu with 4 options.
  43
  44 ### Styling
  45
  46 The following custom properties and mixins are also available for styling:
  47
  48 Custom property | Description | Default
  49 ----------------|-------------|----------
  50 `--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
  51 `--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
  52 `--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
  53 `--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
  54 `--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
  55 `--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
  56
  57 You can also use any of the `paper-input-container` and `paper-menu-button`
  58 style mixins and custom properties to style the internal input and menu button
  59 respectively.
  60
  61 @group Paper Elements
  62 @element paper-dropdown-menu
  63 @hero hero.svg
  64 @demo demo/index.html
  65 -->
  66
  67 </head><body><dom-module id="paper-dropdown-menu">
  68   <style>
  69     :host {
  70       display: inline-block;
  71       position: relative;
  72       text-align: left;
  73       cursor: pointer;
  74
  75       --paper-input-container-input: {
  76         overflow: hidden;
  77         white-space: nowrap;
  78         text-overflow: ellipsis;
  79         max-width: 100%;
  80         box-sizing: border-box;
  81         cursor: pointer;
  82       };
  83
  84       @apply(--paper-dropdown-menu);
  85     }
  86
  87     :host([disabled]) {
  88       @apply(--paper-dropdown-menu-disabled);
  89     }
  90
  91     :host([noink]) paper-ripple {
  92       display: none;
  93     }
  94
  95     :host([no-label-float]) paper-ripple {
  96       top: 8px;
  97     }
  98
  99     paper-ripple {
 100       top: 20px;
 101       left: 8px;
 102       bottom: 16px;
 103       right: 8px;
 104
 105       @apply(--paper-dropdown-menu-ripple);
 106     }
 107
 108     paper-menu-button {
 109       @apply(--paper-dropdown-menu-button);
 110     }
 111
 112     paper-input {
 113       @apply(--paper-dropdown-menu-input);
 114     }
 115
 116     iron-icon {
 117       color: var(--disabled-text-color);
 118
 119       @apply(--paper-dropdown-menu-icon);
 120     }
 121
 122   </style>
 123   <template>
 124     <paper-menu-button id="menuButton" vertical-align="top" horizontal-align="right" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" opened="{{opened}}">
 125       <div class="dropdown-trigger">
 126         <paper-ripple></paper-ripple>
 127         <paper-input readonly="" disabled="[[disabled]]" value="[[selectedItemLabel]]" placeholder="[[placeholder]]" always-float-label="[[alwaysFloatLabel]]" no-label-float="[[noLabelFloat]]" label="[[label]]">
 128           <iron-icon icon="arrow-drop-down" suffix=""></iron-icon>
 129         </paper-input>
 130       </div>
 131       <content id="content" select=".dropdown-content"></content>
 132     </paper-menu-button>
 133   </template>
 134 </dom-module>
 135 <script src="paper-dropdown-menu-extracted.js"></script></body></html>