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 @group Paper Elements | |
12 | |
13 `paper-button` is a button containing text or an image. When the user touches | |
14 the button, a ripple effect emanates from the point of contact. | |
15 | |
16 A `paper-button` may be flat or raised. A raised button behaves like a piece | |
17 of paper resting on another sheet, and lifts up upon press. Flat buttons do | |
18 not raise up. Add the `raisedButton` attribute to make a raised button. | |
19 | |
20 Example: | |
21 | |
22 <paper-button label="flat button"></paper-button> | |
23 <paper-button label="raised button" raisedButton></paper-button> | |
24 | |
25 A button should be styled with a background color, text color, ripple color | |
26 and hover color. | |
27 | |
28 To style the background, text and hover color, apply the `background` and | |
29 `color` CSS properties to the button. To style the ripple color, apply the | |
30 `color` CSS property to the `#ripple` element in the button's shadow root: | |
31 | |
32 /* Style #my-button blue with white text and darker blue ink. */ | |
33 #my-button { | |
34 background: #4285f4; | |
35 color: #fff; | |
36 } | |
37 | |
38 #my-button:hover { | |
39 background: #2a56c6; | |
40 } | |
41 | |
42 #my-button::shadow #ripple { | |
43 color: #2a56c6; | |
44 } | |
45 | |
46 @element paper-button | |
47 @extends paper-focusable | |
48 --> | |
49 | |
50 <link href="../polymer/polymer.html" rel="import"> | |
51 <link href="../core-icon/core-icon.html" rel="import"> | |
52 <link href="../paper-focusable/paper-focusable.html" rel="import"> | |
53 <link href="../paper-ripple/paper-ripple.html" rel="import"> | |
54 <link href="../paper-shadow/paper-shadow.html" rel="import"> | |
55 | |
56 <polymer-element name="paper-button" extends="paper-focusable" attributes="label
raisedButton iconSrc icon" | |
57 role="button"> | |
58 | |
59 <template> | |
60 | |
61 <link href="paper-button.css" rel="stylesheet"> | |
62 | |
63 <template if="{{raisedButton}}"> | |
64 <div fit id="shadow-container"> | |
65 <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow> | |
66 </div> | |
67 </template> | |
68 | |
69 <div id="clip"> | |
70 <!-- <div id="focusBg"></div> --> | |
71 <paper-ripple id="ripple"></paper-ripple> | |
72 <div id="content"> | |
73 <template if="{{iconSrc || icon}}"> | |
74 <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon> | |
75 </template> | |
76 <template if="{{label}}"> | |
77 <span>{{label}}</span> | |
78 </template> | |
79 </div> | |
80 </div> | |
81 | |
82 </template> | |
83 | |
84 <script> | |
85 Polymer('paper-button', { | |
86 | |
87 publish: { | |
88 | |
89 /** | |
90 * The label of the button. | |
91 * | |
92 * @attribute label | |
93 * @type string | |
94 * @default '' | |
95 */ | |
96 label: '', | |
97 | |
98 /** | |
99 * If true, the button will be styled as a "raised" button. | |
100 * | |
101 * @attribute raisedButton | |
102 * @type boolean | |
103 * @default false | |
104 */ | |
105 raisedButton: {value: false, reflect: true}, | |
106 | |
107 /** | |
108 * (optional) The URL of an image for an icon to use in the button. | |
109 * Should not use `icon` property if you are using this property. | |
110 * | |
111 * @attribute iconSrc | |
112 * @type string | |
113 * @default '' | |
114 */ | |
115 iconSrc: '', | |
116 | |
117 /** | |
118 * (optional) Specifies the icon name or index in the set of icons | |
119 * available in the icon set. If using this property, load the icon | |
120 * set separately where the icon is used. Should not use `src` | |
121 * if you are using this property. | |
122 * | |
123 * @attribute icon | |
124 * @type string | |
125 * @default '' | |
126 */ | |
127 icon: '' | |
128 | |
129 }, | |
130 | |
131 z: 1, | |
132 | |
133 attached: function() { | |
134 if (this.textContent && !this.textContent.match(/\s+/)) { | |
135 console.warn('Using textContent to label the button is deprecated. Use
the "label" property instead'); | |
136 this.label = this.textContent; | |
137 } | |
138 }, | |
139 | |
140 activeChanged: function() { | |
141 this.super(); | |
142 | |
143 if (this.active) { | |
144 // FIXME: remove when paper-ripple can have a default 'down' state. | |
145 if (!this.lastEvent) { | |
146 var rect = this.getBoundingClientRect(); | |
147 this.lastEvent = { | |
148 x: rect.left + rect.width / 2, | |
149 y: rect.top + rect.height / 2 | |
150 } | |
151 } | |
152 this.$.ripple.downAction(this.lastEvent); | |
153 } else { | |
154 this.$.ripple.upAction(); | |
155 } | |
156 this.adjustZ(); | |
157 }, | |
158 | |
159 focusedChanged: function() { | |
160 this.super(); | |
161 this.adjustZ(); | |
162 }, | |
163 | |
164 disabledChanged: function() { | |
165 this.super(); | |
166 this.adjustZ(); | |
167 }, | |
168 | |
169 // waitForSpillCompleted: function(callback) { | |
170 // this.async(callback, null, (this.$.ink.spillCompleted ? 0 : this.dura
tion)); | |
171 // }, | |
172 | |
173 // resetInk: function() { | |
174 // this.active = false; | |
175 // this.$.ink.reset(); | |
176 // }, | |
177 | |
178 insideButton: function(x, y) { | |
179 var rect = this.getBoundingClientRect(); | |
180 return (rect.left <= x) && (x <= rect.right) && (rect.top <= y) && (y <=
rect.bottom); | |
181 }, | |
182 | |
183 adjustZ: function() { | |
184 if (this.focused) { | |
185 this.classList.add('paper-shadow-animate-z-1-z-2'); | |
186 } else { | |
187 this.classList.remove('paper-shadow-animate-z-1-z-2'); | |
188 | |
189 if (this.active) { | |
190 this.z = 2; | |
191 } else if (this.disabled) { | |
192 this.z = 0; | |
193 } else { | |
194 this.z = 1; | |
195 } | |
196 | |
197 } | |
198 }, | |
199 | |
200 downAction: function(e) { | |
201 this.super(e); | |
202 this.lastEvent = e; | |
203 }, | |
204 | |
205 labelChanged: function() { | |
206 this.setAttribute('aria-label', this.label); | |
207 } | |
208 | |
209 }); | |
210 </script> | |
211 </polymer-element> | |
OLD | NEW |