| 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 * @module Polymer Core Elements | |
| 12 */ | |
| 13 /** | |
| 14 * core-menu-button is a core-icon-button with a drop down menu | |
| 15 * that allows the user to select an option. The drop down menu is styled with | |
| 16 * an arrow pointing to the button, and can be positioned to the top or the | |
| 17 * bottom of the button with the valign property. The valign property aligns | |
| 18 * the menu to the left or right edge of the button. | |
| 19 * | |
| 20 * Example: | |
| 21 * | |
| 22 * <core-menu-button selected="0"> | |
| 23 * <core-item icon="settings" label="Settings"></core-item> | |
| 24 * <core-item icon="dialog" label="Dialog"></core-item> | |
| 25 * <core-item icon="search" label="Search"></core-item> | |
| 26 * </core-menu-button> | |
| 27 * | |
| 28 * @class core-menu-button | |
| 29 */ | |
| 30 --> | |
| 31 <link href="../polymer/polymer.html" rel="import"> | |
| 32 <link href="../core-icon-button/core-icon-button.html" rel="import"> | |
| 33 <link href="../core-menu/core-menu.html" rel="import"> | |
| 34 <link href="../core-overlay/core-overlay.html" rel="import"> | |
| 35 | |
| 36 <polymer-element name="core-menu-button" attributes="icon label src selected ope
ned halign valign valueattr multi inlineMenu"> | |
| 37 <template> | |
| 38 <link rel="stylesheet" href="core-menu-button.css"> | |
| 39 <core-overlay target="{{$.overlay}}" opened="{{opened}}" layered?="{{!inline
Menu}}"></core-overlay> | |
| 40 <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon
}}" active="{{opened}}"><span>{{label}}</span></core-icon-button> | |
| 41 <div id="overlay" halign="{{halign}}" valign="{{valign}}"> | |
| 42 <style> | |
| 43 #overlay { | |
| 44 position: absolute; | |
| 45 left: 0px; | |
| 46 top: 40px; | |
| 47 padding: 8px; | |
| 48 background: #fff; | |
| 49 border: 1px solid #ccc; | |
| 50 border-radius: 3px; | |
| 51 /* overlay styling must be complete */ | |
| 52 font-size: 1rem; | |
| 53 } | |
| 54 | |
| 55 core-menu { | |
| 56 margin: 0; | |
| 57 } | |
| 58 | |
| 59 #overlay[halign=right] { | |
| 60 left: auto; | |
| 61 right: 0px; | |
| 62 } | |
| 63 | |
| 64 #overlay[valign=top] { | |
| 65 top: auto; | |
| 66 bottom: 40px; | |
| 67 } | |
| 68 </style> | |
| 69 <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}
}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}"
on-core-select="{{closeAction}}"> | |
| 70 <content select="*"></content> | |
| 71 </core-menu> | |
| 72 </div> | |
| 73 </template> | |
| 74 <script> | |
| 75 Polymer('core-menu-button', { | |
| 76 /** | |
| 77 * The icon to display. | |
| 78 * @attribute icon | |
| 79 * @type string | |
| 80 */ | |
| 81 icon: 'dots', | |
| 82 src: '', | |
| 83 /** | |
| 84 * The index of the selected menu item. | |
| 85 * @attribute selected | |
| 86 * @type number | |
| 87 */ | |
| 88 selected: '', | |
| 89 /** | |
| 90 * Set to true to open the menu. | |
| 91 * @attribute opened | |
| 92 * @type boolean | |
| 93 */ | |
| 94 opened: false, | |
| 95 /** | |
| 96 * Set to true to cause the menu popup to be displayed inline rather | |
| 97 * than in its own layer. | |
| 98 * @attribute inlineMenu | |
| 99 * @type boolean | |
| 100 */ | |
| 101 inlineMenu: false, | |
| 102 /** | |
| 103 * Horizontally align the overlay with the button. Accepted values are | |
| 104 * ["left", "center", "right"]. | |
| 105 * @attribute halign | |
| 106 * @type string | |
| 107 */ | |
| 108 halign: 'center', | |
| 109 /** | |
| 110 * Display the overlay on top or below the button. Accepted values are | |
| 111 * ["top", "bottom"]. | |
| 112 * @attribute valign | |
| 113 * @type string | |
| 114 */ | |
| 115 valign: 'bottom', | |
| 116 multi: false, | |
| 117 closeAction: function() { | |
| 118 this.opened = false; | |
| 119 }, | |
| 120 /** | |
| 121 * Toggle the opened state of the dropdown. | |
| 122 * @method toggle | |
| 123 */ | |
| 124 toggle: function() { | |
| 125 this.opened = !this.opened; | |
| 126 }, | |
| 127 /** | |
| 128 * The selected menu item. | |
| 129 * @property selection | |
| 130 * @type Node | |
| 131 */ | |
| 132 get selection() { | |
| 133 return this.$.menu.selection; | |
| 134 } | |
| 135 }); | |
| 136 </script> | |
| 137 </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