| 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 `core-dropdown` is a control where the user can choose from an array of options
in a drop-down | |
| 13 menu. The currently selected option is displayed in the control. | |
| 14 | |
| 15 Example: | |
| 16 | |
| 17 <core-dropdown selected="Financier" valueattr="label"> | |
| 18 <core-item label="Croissant"></core-item> | |
| 19 <core-item label="Donut"></core-item> | |
| 20 <core-item label="Financier"></core-item> | |
| 21 <core-item label="Madeleine"></core-item> | |
| 22 </core-dropdown> | |
| 23 | |
| 24 This example renders a drop-down menu with 4 options, with the option `Financier
` pre-selected. | |
| 25 | |
| 26 Theming | |
| 27 ------- | |
| 28 | |
| 29 Style the drop-down menu with the `core-dropdown::shadow #menu` selector. | |
| 30 | |
| 31 Example: | |
| 32 | |
| 33 core-dropdown::shadow #menu { | |
| 34 background-color: #eee; | |
| 35 border: 1px solid #ccc; | |
| 36 } | |
| 37 | |
| 38 @group Polymer Core Elements | |
| 39 @element core-dropdown | |
| 40 @status beta | |
| 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 deselectio
n | |
| 52 @param {Object} detail.item the item element | |
| 53 --> | |
| 54 <link href="../polymer/polymer.html" rel="import"> | |
| 55 <link href="../core-icon/core-icon.html" rel="import"> | |
| 56 <link href="../core-icons/core-icons.html" rel="import"> | |
| 57 <link href="../core-item/core-item.html" rel="import"> | |
| 58 <link href="../core-menu/core-menu.html" rel="import"> | |
| 59 <link href="../core-overlay/core-overlay.html" rel="import"> | |
| 60 | |
| 61 <polymer-element name="core-dropdown"> | |
| 62 <template> | |
| 63 | |
| 64 <link href="core-dropdown.css" rel="stylesheet"> | |
| 65 | |
| 66 <div id="control" layout horizontal center on-tap="{{toggle}}"> | |
| 67 <core-item flex src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" labe
l="{{selectedItem ? selectedItem.label : label}}"></core-item> | |
| 68 <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}
"></core-icon> | |
| 69 </div> | |
| 70 | |
| 71 <core-overlay target="{{$.menu}}" opened="{{opened}}" on-core-overlay-open="{{
openAction}}"></core-overlay> | |
| 72 | |
| 73 <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" s
electedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{s
electedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{s
electAction}}"> | |
| 74 <content select="*"></content> | |
| 75 </core-menu> | |
| 76 | |
| 77 </template> | |
| 78 <script> | |
| 79 | |
| 80 Polymer({ | |
| 81 | |
| 82 publish: { | |
| 83 | |
| 84 /** | |
| 85 * True if the menu is open. | |
| 86 * | |
| 87 * @attribute opened | |
| 88 * @type boolean | |
| 89 * @default false | |
| 90 */ | |
| 91 opened: false, | |
| 92 | |
| 93 /** | |
| 94 * A label for the control. The label is displayed if no item is selected. | |
| 95 * | |
| 96 * @attribute label | |
| 97 * @type string | |
| 98 * @default 'Select an item' | |
| 99 */ | |
| 100 label: 'Select an item', | |
| 101 | |
| 102 /** | |
| 103 * The currently selected element. By default this is the index of the ite
m element. | |
| 104 * If you want a specific attribute value of the element to be used instea
d of the | |
| 105 * index, set `valueattr` to that attribute name. | |
| 106 * | |
| 107 * @attribute selected | |
| 108 * @type Object | |
| 109 * @default null | |
| 110 */ | |
| 111 selected: null, | |
| 112 | |
| 113 /** | |
| 114 * Specifies the attribute to be used for "selected" attribute. | |
| 115 * | |
| 116 * @attribute valueattr | |
| 117 * @type string | |
| 118 * @default 'name' | |
| 119 */ | |
| 120 valueattr: 'name', | |
| 121 | |
| 122 /** | |
| 123 * Specifies the CSS class to be used to add to the selected element. | |
| 124 * | |
| 125 * @attribute selectedClass | |
| 126 * @type string | |
| 127 * @default 'core-selected' | |
| 128 */ | |
| 129 selectedClass: 'core-selected', | |
| 130 | |
| 131 /** | |
| 132 * Specifies the property to be used to set on the selected element | |
| 133 * to indicate its active state. | |
| 134 * | |
| 135 * @attribute selectedProperty | |
| 136 * @type string | |
| 137 * @default '' | |
| 138 */ | |
| 139 selectedProperty: '', | |
| 140 | |
| 141 /** | |
| 142 * Specifies the attribute to set on the selected element to indicate | |
| 143 * its active state. | |
| 144 * | |
| 145 * @attribute selectedAttribute | |
| 146 * @type string | |
| 147 * @default 'active' | |
| 148 */ | |
| 149 selectedAttribute: 'selected', | |
| 150 | |
| 151 /** | |
| 152 * The currently selected element. | |
| 153 * | |
| 154 * @attribute selectedItem | |
| 155 * @type Object | |
| 156 * @default null | |
| 157 */ | |
| 158 selectedItem: null, | |
| 159 | |
| 160 /** | |
| 161 * Horizontally align the overlay with the control. | |
| 162 * @attribute halign | |
| 163 * @type "left"|"right" | |
| 164 * @default "left" | |
| 165 */ | |
| 166 halign: {value: 'left', reflect: true}, | |
| 167 | |
| 168 /** | |
| 169 * Vertically align the dropdown menu with the control. | |
| 170 * @attribute valign | |
| 171 * @type "top"|"bottom" | |
| 172 * @default "bottom" | |
| 173 */ | |
| 174 valign: {value: 'bottom', reflect: true} | |
| 175 | |
| 176 }, | |
| 177 | |
| 178 toggle: function() { | |
| 179 this.opened = !this.opened; | |
| 180 }, | |
| 181 | |
| 182 openAction: function(e) { | |
| 183 if (e.detail) { | |
| 184 var rect = this.$.control.getBoundingClientRect(); | |
| 185 if (this.valign === 'top') { | |
| 186 this.$.menu.style.top = 'auto'; | |
| 187 this.$.menu.style.bottom = rect.height + 'px'; | |
| 188 this.$.menu.style.maxHeight = (window.innerHeight - (window.innerHeigh
t - rect.top) - 12) + 'px'; | |
| 189 } else { | |
| 190 this.$.menu.style.top = rect.height + 'px'; | |
| 191 this.$.menu.style.bottom = 'auto'; | |
| 192 this.$.menu.style.maxHeight = (window.innerHeight - rect.height - rect
.top - 12) + 'px'; | |
| 193 } | |
| 194 this.$.menu.style.minWidth = rect.width + 'px'; | |
| 195 } | |
| 196 }, | |
| 197 | |
| 198 selectAction: function() { | |
| 199 this.opened = false; | |
| 200 } | |
| 201 }); | |
| 202 | |
| 203 </script> | |
| 204 </polymer-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592603004:
Revert "Polymer elements added to third_party/polymer." (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master