| 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 |