| OLD | NEW |
|---|
| (Empty) |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt | |
| 8 --> | |
| 9 | |
| 10 <!-- | |
| 11 | |
| 12 `paper-dropdown-menu` is a control where the user can choose from an array of | |
| 13 options in a drop-down menu. The currently selected option is displayed in | |
| 14 the control. | |
| 15 | |
| 16 Example: | |
| 17 | |
| 18 <paper-dropdown-menu selected="Financier" valueattr="label"> | |
| 19 <paper-item label="Croissant"></paper-item> | |
| 20 <paper-item label="Donut"></paper-item> | |
| 21 <paper-item label="Financier"></paper-item> | |
| 22 <paper-item label="Madeleine"></paper-item> | |
| 23 </paper-dropdown-menu> | |
| 24 | |
| 25 This example renders a drop-down menu with 4 options, with the option | |
| 26 `Financier` pre-selected. | |
| 27 | |
| 28 Theming | |
| 29 ------- | |
| 30 | |
| 31 Style the drop-down menu with the `paper-dropdown-menu::shadow #menu` selector. | |
| 32 | |
| 33 Example: | |
| 34 | |
| 35 paper-dropdown-menu::shadow #dropdown { | |
| 36 background-color: #eee; | |
| 37 border: 1px solid #ccc; | |
| 38 } | |
| 39 | |
| 40 @group Paper Elements | |
| 41 @element paper-dropdown-menu | |
| 42 @status beta | |
| 43 @homepage github.io | |
| 44 --> | |
| 45 | |
| 46 <!-- | |
| 47 Fired when an item's selection state is changed. This event is fired both | |
| 48 when an item is selected or deselected. The `isSelected` detail property | |
| 49 contains the selection state. | |
| 50 | |
| 51 @event core-select | |
| 52 @param {Object} detail | |
| 53 @param {boolean} detail.isSelected true for selection and false for deselectio
n | |
| 54 @param {Object} detail.item the item element | |
| 55 --> | |
| 56 <link href="../polymer/polymer.html" rel="import"> | |
| 57 | |
| 58 <link href="../core-dropdown/core-dropdown.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="../core-menu/core-menu.html" rel="import"> | |
| 62 | |
| 63 <link href="../paper-shadow/paper-shadow.html" rel="import"> | |
| 64 | |
| 65 <polymer-element name="paper-dropdown-menu"> | |
| 66 <template> | |
| 67 | |
| 68 <link href="paper-dropdown-menu.css" rel="stylesheet"> | |
| 69 | |
| 70 <div id="control" layout horizontal selected?="{{selectedItem}}" on-tap="{{tog
gle}}"> | |
| 71 <div flex> | |
| 72 {{selectedItem ? (selectedItem.label || selected) : label}} | |
| 73 </div> | |
| 74 <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}
"></core-icon> | |
| 75 </div> | |
| 76 | |
| 77 <core-dropdown id="dropdown" relatedTarget="{{$.control}}" opened="{{opened}}"
halign="{{halign}}" valign="{{valign}}"> | |
| 78 | |
| 79 <paper-shadow z="1" target="{{$.dropdown}}" hasPosition></paper-shadow> | |
| 80 | |
| 81 <div class="menu-container"> | |
| 82 <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}
}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty=
"{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-activat
e="{{activateAction}}"> | |
| 83 <content></content> | |
| 84 </core-menu> | |
| 85 </div> | |
| 86 | |
| 87 </core-dropdown> | |
| 88 | |
| 89 </template> | |
| 90 <script> | |
| 91 | |
| 92 Polymer({ | |
| 93 | |
| 94 publish: { | |
| 95 | |
| 96 /** | |
| 97 * True if the menu is open. | |
| 98 * | |
| 99 * @attribute opened | |
| 100 * @type boolean | |
| 101 * @default false | |
| 102 */ | |
| 103 opened: false, | |
| 104 | |
| 105 /** | |
| 106 * A label for the control. The label is displayed if no item is selected. | |
| 107 * | |
| 108 * @attribute label | |
| 109 * @type string | |
| 110 * @default 'Select an item' | |
| 111 */ | |
| 112 label: 'Select an item', | |
| 113 | |
| 114 /** | |
| 115 * The currently selected element. By default this is the index of the ite
m element. | |
| 116 * If you want a specific attribute value of the element to be used instea
d of the | |
| 117 * index, set `valueattr` to that attribute name. | |
| 118 * | |
| 119 * @attribute selected | |
| 120 * @type Object | |
| 121 * @default null | |
| 122 */ | |
| 123 selected: null, | |
| 124 | |
| 125 /** | |
| 126 * Specifies the attribute to be used for "selected" attribute. | |
| 127 * | |
| 128 * @attribute valueattr | |
| 129 * @type string | |
| 130 * @default 'name' | |
| 131 */ | |
| 132 valueattr: 'name', | |
| 133 | |
| 134 /** | |
| 135 * Specifies the CSS class to be used to add to the selected element. | |
| 136 * | |
| 137 * @attribute selectedClass | |
| 138 * @type string | |
| 139 * @default 'core-selected' | |
| 140 */ | |
| 141 selectedClass: 'core-selected', | |
| 142 | |
| 143 /** | |
| 144 * Specifies the property to be used to set on the selected element | |
| 145 * to indicate its active state. | |
| 146 * | |
| 147 * @attribute selectedProperty | |
| 148 * @type string | |
| 149 * @default '' | |
| 150 */ | |
| 151 selectedProperty: '', | |
| 152 | |
| 153 /** | |
| 154 * Specifies the attribute to set on the selected element to indicate | |
| 155 * its active state. | |
| 156 * | |
| 157 * @attribute selectedAttribute | |
| 158 * @type string | |
| 159 * @default 'active' | |
| 160 */ | |
| 161 selectedAttribute: 'selected', | |
| 162 | |
| 163 /** | |
| 164 * The currently selected element. | |
| 165 * | |
| 166 * @attribute selectedItem | |
| 167 * @type Object | |
| 168 * @default null | |
| 169 */ | |
| 170 selectedItem: null, | |
| 171 | |
| 172 /** | |
| 173 * Horizontally align the overlay with the control. | |
| 174 * @attribute halign | |
| 175 * @type "left"|"right" | |
| 176 * @default "left" | |
| 177 */ | |
| 178 halign: 'left', | |
| 179 | |
| 180 /** | |
| 181 * Vertically align the dropdown menu with the control. | |
| 182 * @attribute valign | |
| 183 * @type "top"|"bottom" | |
| 184 * @default "top" | |
| 185 */ | |
| 186 valign: 'top' | |
| 187 | |
| 188 }, | |
| 189 | |
| 190 toggle: function() { | |
| 191 this.opened = !this.opened; | |
| 192 }, | |
| 193 | |
| 194 activateAction: function() { | |
| 195 this.opened = false; | |
| 196 } | |
| 197 | |
| 198 }); | |
| 199 | |
| 200 </script> | |
| 201 </polymer-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master