| 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-menu` is a control where the user can choose from an array of opt
ions in a drop-down | |
| 13 menu. The currently selected option is displayed in the control. | |
| 14 | |
| 15 Example: | |
| 16 | |
| 17 <core-dropdown-menu 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-menu> | |
| 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-menu::shadow #dropdown` selecto
r. | |
| 30 | |
| 31 Example: | |
| 32 | |
| 33 core-dropdown-menu::shadow #dropdown { | |
| 34 border: 1px solid #ccc; | |
| 35 max-height: 12px; | |
| 36 } | |
| 37 | |
| 38 To modify the drop-down's margins, use the same selector. The default margin is
12px. | |
| 39 | |
| 40 core-dropdown-menu::shadow #dropdown { | |
| 41 margin: 24px; | |
| 42 } | |
| 43 | |
| 44 @group Polymer Core Elements | |
| 45 @element core-dropdown-menu | |
| 46 @status beta | |
| 47 @homepage github.io | |
| 48 --> | |
| 49 | |
| 50 <!-- | |
| 51 Fired when an item's selection state is changed. This event is fired both | |
| 52 when an item is selected or deselected. The `isSelected` detail property | |
| 53 contains the selection state. | |
| 54 | |
| 55 @event core-select | |
| 56 @param {Object} detail | |
| 57 @param {boolean} detail.isSelected true for selection and false for deselectio
n | |
| 58 @param {Object} detail.item the item element | |
| 59 --> | |
| 60 | |
| 61 <!-- | |
| 62 Fired when an item element is tapped. | |
| 63 | |
| 64 @event core-activate | |
| 65 @param {Object} detail | |
| 66 @param {Object} detail.item the item element | |
| 67 --> | |
| 68 | |
| 69 <link href="../polymer/polymer.html" rel="import"> | |
| 70 <link href="../core-icon/core-icon.html" rel="import"> | |
| 71 <link href="../core-icons/core-icons.html" rel="import"> | |
| 72 <link href="../core-item/core-item.html" rel="import"> | |
| 73 <link href="../core-menu/core-menu.html" rel="import"> | |
| 74 <link href="../core-dropdown/core-dropdown.html" rel="import"> | |
| 75 | |
| 76 <polymer-element name="core-dropdown-menu"> | |
| 77 <template> | |
| 78 | |
| 79 <link href="core-dropdown-menu.css" rel="stylesheet"> | |
| 80 | |
| 81 <div id="control" layout horizontal center on-tap="{{toggle}}"> | |
| 82 <core-item flex src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" labe
l="{{selectedItem ? (selectedItem.label || selected) : label}}"></core-item> | |
| 83 <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}
"></core-icon> | |
| 84 </div> | |
| 85 | |
| 86 <core-dropdown id="dropdown" relatedTarget="{{$.control}}" opened="{{opened}}"
halign="{{halign}}" valign="{{valign}}"> | |
| 87 <core-menu selected="{{selected}}" valueattr="{{valueattr}}" selectedItem="{
{selectedItem}}" on-core-activate="{{activateAction}}"> | |
| 88 <content></content> | |
| 89 </core-menu> | |
| 90 </core-dropdown> | |
| 91 | |
| 92 </template> | |
| 93 <script> | |
| 94 | |
| 95 Polymer({ | |
| 96 | |
| 97 publish: { | |
| 98 | |
| 99 /** | |
| 100 * True if the menu is open. | |
| 101 * | |
| 102 * @attribute opened | |
| 103 * @type boolean | |
| 104 * @default false | |
| 105 */ | |
| 106 opened: false, | |
| 107 | |
| 108 /** | |
| 109 * A label for the control. The label is displayed if no item is selected. | |
| 110 * | |
| 111 * @attribute label | |
| 112 * @type string | |
| 113 * @default 'Select an item' | |
| 114 */ | |
| 115 label: 'Select an item', | |
| 116 | |
| 117 /** | |
| 118 * The currently selected element. By default this is the index of the ite
m element. | |
| 119 * If you want a specific attribute value of the element to be used instea
d of the | |
| 120 * index, set `valueattr` to that attribute name. | |
| 121 * | |
| 122 * @attribute selected | |
| 123 * @type Object | |
| 124 * @default null | |
| 125 */ | |
| 126 selected: null, | |
| 127 | |
| 128 /** | |
| 129 * Specifies the attribute to be used for "selected" attribute. | |
| 130 * | |
| 131 * @attribute valueattr | |
| 132 * @type string | |
| 133 * @default 'name' | |
| 134 */ | |
| 135 valueattr: 'name', | |
| 136 | |
| 137 /** | |
| 138 * Specifies the CSS class to be used to add to the selected element. | |
| 139 * | |
| 140 * @attribute selectedClass | |
| 141 * @type string | |
| 142 * @default 'core-selected' | |
| 143 */ | |
| 144 selectedClass: 'core-selected', | |
| 145 | |
| 146 /** | |
| 147 * Specifies the property to be used to set on the selected element | |
| 148 * to indicate its active state. | |
| 149 * | |
| 150 * @attribute selectedProperty | |
| 151 * @type string | |
| 152 * @default '' | |
| 153 */ | |
| 154 selectedProperty: '', | |
| 155 | |
| 156 /** | |
| 157 * Specifies the attribute to set on the selected element to indicate | |
| 158 * its active state. | |
| 159 * | |
| 160 * @attribute selectedAttribute | |
| 161 * @type string | |
| 162 * @default 'active' | |
| 163 */ | |
| 164 selectedAttribute: 'selected', | |
| 165 | |
| 166 /** | |
| 167 * The currently selected element. | |
| 168 * | |
| 169 * @attribute selectedItem | |
| 170 * @type Object | |
| 171 * @default null | |
| 172 */ | |
| 173 selectedItem: null, | |
| 174 | |
| 175 /** | |
| 176 * Horizontally align the overlay with the control. | |
| 177 * | |
| 178 * @attribute halign | |
| 179 * @type "left" | "right" | |
| 180 * @default "left" | |
| 181 */ | |
| 182 halign: 'left', | |
| 183 | |
| 184 /** | |
| 185 * Vertically align the dropdown menu with the control. | |
| 186 * | |
| 187 * @attribute valign | |
| 188 * @type "top" | "bottom" | |
| 189 * @default "bottom" | |
| 190 */ | |
| 191 valign: 'top' | |
| 192 | |
| 193 }, | |
| 194 | |
| 195 activateAction: function() { | |
| 196 this.opened = false; | |
| 197 }, | |
| 198 | |
| 199 toggle: function() { | |
| 200 this.opened = !this.opened; | |
| 201 } | |
| 202 | |
| 203 }); | |
| 204 | |
| 205 </script> | |
| 206 </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