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 A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when
tapped. | |
11 | |
12 Example: | |
13 | |
14 <paper-menu-button icon="menu"> | |
15 <div>Menu Item 1</div> | |
16 <div>Menu Item 2</div> | |
17 <div>Menu Item 3</div> | |
18 </paper-menu-button> | |
19 | |
20 Theming | |
21 ======= | |
22 | |
23 To change the text color in the menu: | |
24 | |
25 paper-menu-button::shadow #menu { | |
26 color: white; | |
27 } | |
28 | |
29 To change the overlay background color: | |
30 | |
31 paper-menu-button::shadow .paper-menu-button-overlay-bg { | |
32 background: green; | |
33 } | |
34 | |
35 To change the color of the ripple effect: | |
36 | |
37 paper-menu-button:shadow .paper-menu-button-overlay-ink { | |
38 background: red; | |
39 } | |
40 | |
41 @group Paper Elements | |
42 @element paper-menu-button | |
43 @extends paper-focusable | |
44 --> | |
45 <link href="../polymer/polymer.html" rel="import"> | |
46 | |
47 <link href="../core-dropdown/core-dropdown.html" rel="import"> | |
48 <link href="../core-icon/core-icon.html" rel="import"> | |
49 <link href="../core-menu/core-menu.html" rel="import"> | |
50 <link href="../core-style/core-style.html" rel="import"> | |
51 | |
52 <link href="../paper-focusable/paper-focusable.html" rel="import"> | |
53 <link href="../paper-shadow/paper-shadow.html" rel="import"> | |
54 | |
55 <link href="paper-menu-button-transition.html" rel="import"> | |
56 | |
57 <core-style id="paper-menu-button"> | |
58 | |
59 .paper-menu-button-overlay-ink { | |
60 background: {{g.paperMenuButton.background}} | |
61 } | |
62 | |
63 .paper-menu-button-overlay-bg { | |
64 background: {{g.paperMenuButton.background}} | |
65 } | |
66 | |
67 </core-style> | |
68 | |
69 <script> | |
70 (function() { | |
71 | |
72 CoreStyle.g.paperMenuButton = CoreStyle.g.paperMenuButton || { | |
73 'background': '#fff' | |
74 }; | |
75 | |
76 })(); | |
77 </script> | |
78 | |
79 <polymer-element name="paper-menu-button" extends="paper-focusable" attributes="
src icon opened halign valign slow"> | |
80 <template> | |
81 | |
82 <link rel="stylesheet" href="paper-menu-button.css"> | |
83 <core-style ref="paper-menu-button"></core-style> | |
84 | |
85 <core-icon src="{{src}}" icon="{{icon}}" on-tap="{{tapAction}}"></core-icon> | |
86 | |
87 <core-dropdown id="dropdown" relatedTarget="{{}}" opened="{{opened}}" halign
="{{halign}}" valign="{{valign}}" transition="{{noTransition ? '' : transition}}
" on-core-transitionend="{{transitionEndAction}}"> | |
88 | |
89 <paper-shadow id="shadow" z="1" target="{{$.dropdown}}"></paper-shadow> | |
90 | |
91 <div class="paper-menu-button-overlay-ink"></div> | |
92 <div id="overlayBg" class="paper-menu-button-overlay-bg"></div> | |
93 | |
94 <div class="paper-menu-button-menu-container"> | |
95 <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedIte
m}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedPropert
y="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-selec
t="{{selectAction}}" on-core-activate="{{activateAction}}"> | |
96 <content></content> | |
97 </core-menu> | |
98 </div> | |
99 | |
100 </core-dropdown> | |
101 | |
102 </template> | |
103 <script> | |
104 Polymer('paper-menu-button', { | |
105 | |
106 publish: { | |
107 | |
108 /** | |
109 * If true, this menu is currently visible. | |
110 * | |
111 * @attribute opened | |
112 * @type boolean | |
113 * @default false | |
114 */ | |
115 opened: false, | |
116 | |
117 /** | |
118 * The horizontal alignment of the menu relative to the button. | |
119 * | |
120 * @attribute halign | |
121 * @type 'left' | 'right' | |
122 * @default 'left' | |
123 */ | |
124 halign: 'left', | |
125 | |
126 /** | |
127 * The vertical alignment of the menu relative to the button. | |
128 * | |
129 * @attribute valign | |
130 * @type 'bottom' | 'top' | |
131 * @default 'top' | |
132 */ | |
133 valign: 'top', | |
134 | |
135 /** | |
136 * Set to true to disable the transition. | |
137 * | |
138 * @attribute noTransition | |
139 * @type boolean | |
140 * @default false | |
141 */ | |
142 noTransition: false | |
143 | |
144 }, | |
145 | |
146 computed: { | |
147 transition: '"paper-menu-button-transition-" + valign + "-" + halign' | |
148 }, | |
149 | |
150 /** | |
151 * The URL of an image for the icon. Should not use `icon` property | |
152 * if you are using this property. | |
153 * | |
154 * @attribute src | |
155 * @type string | |
156 * @default '' | |
157 */ | |
158 src: '', | |
159 | |
160 /** | |
161 * Specifies the icon name or index in the set of icons available in | |
162 * the icon set. Should not use `src` property if you are using this | |
163 * property. | |
164 * | |
165 * @attribute icon | |
166 * @type string | |
167 * @default '' | |
168 */ | |
169 icon: '', | |
170 | |
171 tapAction: function() { | |
172 if (this.disabled) { | |
173 return; | |
174 } | |
175 | |
176 this.super(); | |
177 this.toggle(); | |
178 if (this.opened && !this.noTransition) { | |
179 this.$.shadow.z = 0; | |
180 } | |
181 }, | |
182 | |
183 transitionEndAction: function() { | |
184 this.$.shadow.z = 1; | |
185 }, | |
186 | |
187 activateAction: function() { | |
188 this.opened = false; | |
189 }, | |
190 | |
191 /** | |
192 * Toggle the opened state of the menu. | |
193 * | |
194 * @method toggle | |
195 */ | |
196 toggle: function() { | |
197 this.opened = !this.opened; | |
198 } | |
199 | |
200 }); | |
201 </script> | |
202 </polymer-element> | |
OLD | NEW |