1 <!-- 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 Code distributed by Google as part of the polymer project is also 7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 --> 9 10 <!-- 11 12 `paper-dropdown-menu` works together with `paper-dropdown` and `core-menu` to 13 implement a drop-down menu. The currently selected item is displayed in the 14 control. If no item is selected, the `label` is displayed instead. 15 16 The child element with the class `dropdown` will be used as the drop-down 17 menu. It should be a `paper-dropdown` or other overlay element. You should 18 also provide a `core-selector` or other selector element, such as `core-menu`, 19 in the drop-down. You should apply the class `menu` to the selector element. 20 21 Example: 22 23 <paper-dropdown-menu label="Your favorite pastry"> 24 <paper-dropdown class="dropdown"> 25 <core-menu class="menu"> 26 <paper-item>Croissant</paper-item> 27 <paper-item>Donut</paper-item> 28 <paper-item>Financier</paper-item> 29 <paper-item>Madeleine</paper-item> 30 </core-menu> 31 </paper-dropdown> 32 </paper-dropdown-menu> 33 34 This example renders a drop-down menu with 4 options. 35 36 @group Paper Elements 37 @element paper-dropdown-menu 38 @extends core-dropdown-base 39 @mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable 40 @status unstable 41 @homepage github.io 42 --> 43 44 <!-- 45 Fired when an item's selection state is changed. This event is fired both 46 when an item is selected or deselected. The `isSelected` detail property 47 contains the selection state. 48 49 @event core-select 50 @param {Object} detail 51 @param {boolean} detail.isSelected true for selection and false for deselection 52 @param {Object} detail.item the item element 53 --> 54 <link href="../polymer/polymer.html" rel="import"> 55 56 <link href="../core-a11y-keys/core-a11y-keys.html" rel="import"> 57 <link href="../core-dropdown/core-dropdown-base.html" rel="import"> 58 <link href="../core-focusable/core-focusable.html" rel="import"> 59 <link href="../core-icon/core-icon.html" rel="import"> 60 <link href="../core-icons/core-icons.html" rel="import"> 61 <link href="../paper-shadow/paper-shadow.html" rel="import"> 62 63 <style shim-shadowdom> 64 html /deep/ #paper-dropdown-menu-dropdown { 65 margin: 12px; 66 overflow: visible; 67 } 68 69 html /deep/ #paper-dropdown-menu-dropdown #menu { 70 padding: 8px 0; 71 margin: 0; 72 } 73 74 html /deep/ #paper-dropdown-menu-dropdown .menu-container { 75 overflow: auto; 76 max-height: 100%; 77 max-width: 100%; 78 } 79 </style> 80 81 <polymer-element name="paper-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0"> 82 <template> 83 84 <style> 85 :host { 86 -moz-user-select: none; 87 -ms-user-select: none; 88 -webkit-user-select: none; 89 user-select: none; 90 cursor: pointer; 91 padding: 0.5em 0 0.25em; 92 margin: 0.75em 0; 93 border-bottom: 1px solid #757575; 94 outline: none; 95 } 96 97 #label:not(.selectedItem), #arrow { 98 color: #757575; 99 } 100 101 #label { 102 overflow: hidden; 103 white-space: nowrap; 104 text-overflow: ellipsis; 105 } 106 </style> 107 108 <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys> 109 110 <div flex auto id="label">{{selectedItemLabel || label}}</div> 111 <core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon> 112 113 <content></content> 114 115 </template> 116 <script> 117 118 (function() { 119 120 var p = { 121 122 publish: { 123 124 /** 125 * A label for the control. The label is displayed if no item is selected. 126 * 127 * @attribute label 128 * @type string 129 * @default 'Select an item' 130 */ 131 label: 'Select an item', 132 133 /** 134 * The icon to display when the drop-down is opened. 135 * 136 * @attribute openedIcon 137 * @type string 138 * @default 'arrow-drop-up' 139 */ 140 openedIcon: 'arrow-drop-up', 141 142 /** 143 * The icon to display when the drop-down is closed. 144 * 145 * @attribute closedIcon 146 * @type string 147 * @default 'arrow-drop-down' 148 */ 149 closedIcon: 'arrow-drop-down' 150 151 }, 152 153 selectedItemLabel: '', 154 155 overlayListeners: { 156 'core-overlay-open': 'openAction', 157 'core-activate': 'activateAction', 158 'core-select': 'selectAction' 159 }, 160 161 activateAction: function(e) { 162 this.opened = false; 163 }, 164 165 selectAction: function(e) { 166 var detail = e.detail; 167 if (detail.isSelected) { 168 this.$.label.classList.add('selectedItem'); 169 this.selectedItemLabel = detail.item.label || detail.item.textContent; 170 } else { 171 this.$.label.classList.remove('selectedItem'); 172 this.selectedItemLabel = ''; 173 } 174 } 175 176 }; 177 178 Polymer.mixin2(p, Polymer.CoreFocusable); 179 Polymer(p); 180 181 })(); 182 183 </script> 184 </polymer-element> 185
