Index: pkg/polymer/lib/elements/polymer-ui-icon-button/polymer-ui-icon-button.html |
diff --git a/pkg/polymer/lib/elements/polymer-ui-icon-button/polymer-ui-icon-button.html b/pkg/polymer/lib/elements/polymer-ui-icon-button/polymer-ui-icon-button.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..84ec6fac93915828dfb0060c658072d418fbb518 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-ui-icon-button/polymer-ui-icon-button.html |
@@ -0,0 +1,77 @@ |
+<!-- |
+Copyright 2013 The Polymer Authors. All rights reserved. |
+Use of this source code is governed by a BSD-style |
+license that can be found in the LICENSE file. |
+--> |
+<!-- |
+/** |
+ * @module Polymer UI Elements |
+ */ |
+/** |
+ * polymer-ui-icon-button enables you to place an image centered in a button. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-icon-button src="star.png"></polymer-ui-icon-button> |
+ * |
+ * Polymer includes an icon set. The property "icon" can be used |
+ * to specify which icon to use. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button> |
+ * |
+ * @class polymer-ui-icon-button |
+ */ |
+--> |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html"> |
+ |
+<polymer-element name="polymer-ui-icon-button" extends="polymer-ui-theme-aware" attributes="src index icon active"> |
+ <template> |
+ <link rel="stylesheet" href="polymer-ui-icon-button.css"> |
+ <polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"><content></content></polymer-ui-icon> |
+ </template> |
+ <script> |
+ Polymer('polymer-ui-icon-button', { |
+ /** |
+ * The URL of an image for the icon. |
+ * |
+ * @attribute src |
+ * @type string |
+ * @default '' |
+ */ |
+ src: '', |
+ /** |
+ * If true, border is placed around the button to indicate |
+ * active state. |
+ * |
+ * @attribute active |
+ * @type boolean |
+ * @default false |
+ */ |
+ active: false, |
+ /** |
+ * Specifies the icon from the Polymer icon set. |
+ * |
+ * @attribute icon |
+ * @type string |
+ * @default '' |
+ */ |
+ icon: '', |
+ /** |
+ * If a theme is applied that includes an icon set, the index of the |
+ * icon to display. |
+ * |
+ * @attribute index |
+ * @type number |
+ * @default -1 |
+ */ |
+ index: -1, |
+ activeChanged: function() { |
+ // TODO(sjmiles): sugar this common case |
+ this.classList.toggle('selected', this.active); |
+ } |
+ }); |
+ </script> |
+</polymer-element> |