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

Side by Side Diff: third_party/polymer/components/paper-button/paper-button.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698