Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(18)

Side by Side Diff: polymer_1.0.4/bower_components/paper-menu-button/paper-menu-button.html

Issue 1264073002: Update polymer 1.0 install to pick up newly added elements. (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Update bower file to match actual versions. Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-dropdown/iron-dropdown.html">
13 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">
14 <link rel="import" href="../iron-behaviors/iron-control-state.html">
15 <link rel="import" href="../paper-material/paper-material.html">
16 <link rel="import" href="../paper-styles/default-theme.html">
17 <link rel="import" href="../neon-animation/animations/fade-in-animation.html">
18 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">
19 <link rel="import" href="paper-menu-button-animations.html">
20
21 <!--
22 `paper-menu-button` allows one to compose a designated "trigger" element with
23 another element that represents "content", to create a dropdown menu that
24 displays the "content" when the "trigger" is clicked.
25
26 The child element with the class `dropdown-trigger` will be used as the
27 "trigger" element. The child element with the class `dropdown-content` will be
28 used as the "content" element.
29
30 The `paper-menu-button` is sensitive to its content's `iron-select` events. If
31 the "content" element triggers an `iron-select` event, the `paper-menu-button`
32 will close automatically.
33
34 Example:
35
36 <paper-menu-button>
37 <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-butto n>
38 <paper-menu class="dropdown-content">
39 <paper-item>Share</paper-item>
40 <paper-item>Settings</paper-item>
41 <paper-item>Help</paper-item>
42 </paper-menu>
43 </paper-menu-button>
44
45 ### Styling
46
47 The following custom properties and mixins are also available for styling:
48
49 Custom property | Description | Default
50 ----------------|-------------|----------
51 `--paper-menu-button-dropdown-background` | Background color of the paper-menu-b utton dropdown | `#fff`
52 `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}`
53 `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when dis abled | `{}`
54 `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}`
55
56
57 @hero hero.svg
58 @demo demo/index.html
59 -->
60
61 <dom-module id="paper-menu-button">
62 <style>
63 :host {
64 display: inline-block;
65 position: relative;
66 padding: 8px;
67 outline: none;
68
69 @apply(--paper-menu-button);
70 }
71
72 :host([disabled]) {
73 cursor: auto;
74 color: var(--disabled-text-color);
75
76 @apply(--paper-menu-button-disabled);
77 }
78
79 :host([vertical-align="top"]) paper-material {
80 margin-bottom: 20px;
81 margin-top: -10px;
82 top: 10px;
83 }
84
85 :host([vertical-align="bottom"]) paper-material {
86 bottom: 10px;
87 margin-bottom: -10px;
88 margin-top: 20px;
89 }
90
91 paper-material {
92 border-radius: 2px;
93 background-color: var(--paper-menu-button-dropdown-background, --primary-b ackground-color);
94
95 @apply(--paper-menu-button-dropdown);
96 }
97 </style>
98 <template>
99 <div id="trigger" on-tap="open">
100 <content select=".dropdown-trigger"></content>
101 </div>
102 <iron-dropdown
103 id="dropdown"
104 opened="{{opened}}"
105 horizontal-align="[[horizontalAlign]]"
106 vertical-align="[[verticalAlign]]"
107 open-animation-config="[[openAnimationConfig]]"
108 close-animation-config="[[closeAnimationConfig]]"
109 no-animations="[[noAnimations]]">
110 <paper-material class="dropdown-content">
111 <content select=".dropdown-content"></content>
112 </paper-material>
113 </iron-dropdown>
114 </template>
115 </dom-module>
116 <script>
117 (function() {
118 'use strict';
119
120 var PaperMenuButton = Polymer({
121
122 is: 'paper-menu-button',
123
124 behaviors: [
125 Polymer.IronA11yKeysBehavior,
126 Polymer.IronControlState
127 ],
128
129 properties: {
130
131 /**
132 * True if the content is currently displayed.
133 */
134 opened: {
135 type: Boolean,
136 value: false,
137 notify: true
138 },
139
140 /**
141 * The orientation against which to align the menu dropdown
142 * horizontally relative to the dropdown trigger.
143 */
144 horizontalAlign: {
145 type: String,
146 value: 'left',
147 reflectToAttribute: true
148 },
149
150 /**
151 * The orientation against which to align the menu dropdown
152 * vertically relative to the dropdown trigger.
153 */
154 verticalAlign: {
155 type: String,
156 value: 'top',
157 reflectToAttribute: true
158 },
159
160 /**
161 * Set to true to disable animations when opening and closing the
162 * dropdown.
163 */
164 noAnimations: {
165 type: Boolean,
166 value: false
167 },
168
169 /**
170 * An animation config. If provided, this will be used to animate the
171 * opening of the dropdown.
172 */
173 openAnimationConfig: {
174 type: Object,
175 value: function() {
176 return [{
177 name: 'fade-in-animation',
178 timing: {
179 delay: 100,
180 duration: 200
181 }
182 }, {
183 name: 'paper-menu-grow-width-animation',
184 timing: {
185 delay: 100,
186 duration: 150,
187 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
188 }
189 }, {
190 name: 'paper-menu-grow-height-animation',
191 timing: {
192 delay: 100,
193 duration: 275,
194 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
195 }
196 }];
197 }
198 },
199
200 /**
201 * An animation config. If provided, this will be used to animate the
202 * closing of the dropdown.
203 */
204 closeAnimationConfig: {
205 type: Object,
206 value: function() {
207 return [{
208 name: 'fade-out-animation',
209 timing: {
210 duration: 150
211 }
212 }, {
213 name: 'paper-menu-shrink-width-animation',
214 timing: {
215 delay: 100,
216 duration: 50,
217 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
218 }
219 }, {
220 name: 'paper-menu-shrink-height-animation',
221 timing: {
222 duration: 200,
223 easing: 'ease-in'
224 }
225 }];
226 }
227 }
228 },
229
230 hostAttributes: {
231 role: 'group',
232 'aria-haspopup': 'true'
233 },
234
235 listeners: {
236 'iron-activate': '_onIronActivate'
237 },
238
239 /**
240 * Make the dropdown content appear as an overlay positioned relative
241 * to the dropdown trigger.
242 */
243 open: function() {
244 this.fire('paper-open');
245 this.$.dropdown.open();
246 },
247
248 /**
249 * Hide the dropdown content.
250 */
251 close: function() {
252 this.fire('paper-close');
253 this.$.dropdown.close();
254 },
255
256 _onIronActivate: function(event) {
257 this.close();
258 }
259 });
260
261 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)';
262 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400;
263
264 Polymer.PaperMenuButton = PaperMenuButton;
265 })();
266 </script>
267
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698