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 | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS | |
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 | |
8 --> | |
9 | |
10 <!-- | |
11 @group Paper Elements | |
12 `paper-icon-button` is a button with an image placed at the center. | |
13 | |
14 Example: | |
15 | |
16 <paper-icon-button iconSrc="star.png"></paper-icon-button> | |
17 | |
18 `paper-icon-button` includes a default icon set. Use `icon` to specify | |
19 which icon from the icon set to use. | |
20 | |
21 Example: | |
22 | |
23 <paper-icon-button icon="menu"></paper-icon-button> | |
24 | |
25 The icons provided by `core-icons` are SVG, and you can style them with CSS. | |
26 | |
27 Example: | |
28 | |
29 <paper-icon-button icon="favorite" style="fill:red;"></paper-icon-button> | |
30 | |
31 See `core-iconset` for more information about how to use a custom icon set. | |
32 | |
33 @element paper-icon-button | |
34 @extends paper-button | |
35 @homepage github.io | |
36 --> | |
37 | |
38 <link href="../core-icon/core-icon.html" rel="import"> | |
39 <link href="../paper-button/paper-button.html" rel="import"> | |
40 | |
41 <polymer-element name="paper-icon-button" extends="paper-button" attributes="fil
l"> | |
42 | |
43 <template> | |
44 | |
45 <link href="paper-icon-button.css" rel="stylesheet"> | |
46 | |
47 <shadow></shadow> | |
48 | |
49 </template> | |
50 | |
51 <script> | |
52 | |
53 Polymer('paper-icon-button', { | |
54 | |
55 publish: { | |
56 | |
57 /** | |
58 * If true, the ripple expands to a square to fill the containing box. | |
59 * | |
60 * @attribute fill | |
61 * @type boolean | |
62 * @default false | |
63 */ | |
64 fill: {value: false, reflect: true} | |
65 | |
66 }, | |
67 | |
68 ready: function() { | |
69 this.$.ripple.classList.add('recenteringTouch'); | |
70 this.fillChanged(); | |
71 }, | |
72 | |
73 fillChanged: function() { | |
74 this.$.ripple.classList.toggle('circle', !this.fill); | |
75 }, | |
76 | |
77 iconChanged: function(oldIcon) { | |
78 if (!this.label) { | |
79 this.setAttribute('aria-label', this.icon); | |
80 } | |
81 } | |
82 | |
83 }); | |
84 | |
85 </script> | |
86 | |
87 </polymer-element> | |
OLD | NEW |