summaryrefslogtreecommitdiffstats
path: root/third_party/polymer/components/paper-icon-button/paper-icon-button.html
diff options
context:
space:
mode:
Diffstat (limited to 'third_party/polymer/components/paper-icon-button/paper-icon-button.html')
-rw-r--r--third_party/polymer/components/paper-icon-button/paper-icon-button.html87
1 files changed, 87 insertions, 0 deletions
diff --git a/third_party/polymer/components/paper-icon-button/paper-icon-button.html b/third_party/polymer/components/paper-icon-button/paper-icon-button.html
new file mode 100644
index 0000000..9e53016
--- /dev/null
+++ b/third_party/polymer/components/paper-icon-button/paper-icon-button.html
@@ -0,0 +1,87 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+
+<!--
+@group Paper Elements
+`paper-icon-button` is a button with an image placed at the center.
+
+Example:
+
+ <paper-icon-button iconSrc="star.png"></paper-icon-button>
+
+`paper-icon-button` includes a default icon set. Use `icon` to specify
+which icon from the icon set to use.
+
+Example:
+
+ <paper-icon-button icon="menu"></paper-icon-button>
+
+The icons provided by `core-icons` are SVG, and you can style them with CSS.
+
+Example:
+
+ <paper-icon-button icon="favorite" style="fill:red;"></paper-icon-button>
+
+See `core-iconset` for more information about how to use a custom icon set.
+
+@element paper-icon-button
+@extends paper-button
+@homepage github.io
+-->
+
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../paper-button/paper-button.html" rel="import">
+
+<polymer-element name="paper-icon-button" extends="paper-button" attributes="fill">
+
+ <template>
+
+ <link href="paper-icon-button.css" rel="stylesheet">
+
+ <shadow></shadow>
+
+ </template>
+
+ <script>
+
+ Polymer('paper-icon-button', {
+
+ publish: {
+
+ /**
+ * If true, the ripple expands to a square to fill the containing box.
+ *
+ * @attribute fill
+ * @type boolean
+ * @default false
+ */
+ fill: {value: false, reflect: true}
+
+ },
+
+ ready: function() {
+ this.$.ripple.classList.add('recenteringTouch');
+ this.fillChanged();
+ },
+
+ fillChanged: function() {
+ this.$.ripple.classList.toggle('circle', !this.fill);
+ },
+
+ iconChanged: function(oldIcon) {
+ if (!this.label) {
+ this.setAttribute('aria-label', this.icon);
+ }
+ }
+
+ });
+
+ </script>
+
+</polymer-element>