Index: pkg/polymer/lib/elements/polymer-ui-menu-item/polymer-ui-menu-item.html |
diff --git a/pkg/polymer/lib/elements/polymer-ui-menu-item/polymer-ui-menu-item.html b/pkg/polymer/lib/elements/polymer-ui-menu-item/polymer-ui-menu-item.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..edea2c821d9bd1bf1a41d379b9488da3f26fa2cf |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-ui-menu-item/polymer-ui-menu-item.html |
@@ -0,0 +1,92 @@ |
+<!-- |
+Copyright 2013 The Toolkitchen 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-menu-item is styled to look like a menu item. It should be used |
+ * in conjunction with polymer-ui-menu or polymer-ui-sibebar-menu. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item> |
+ * |
+ * @class polymer-ui-menu-item |
+ */ |
+/** |
+ * The URL of an image for the icon. |
+ * |
+ * @attribute src |
+ * @type string |
+ * @default '' |
+ */ |
+/** |
+ * Specifies the icon from the Polymer icon set. |
+ * |
+ * @attribute icon |
+ * @type string |
+ * @default '' |
+ */ |
+/** |
+ * Specifies the label for the menu item. |
+ * |
+ * @attribute label |
+ * @type string |
+ * @default '' |
+ */ |
+/** |
+ * Specifies the URL of the link it goes to when tapped on. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-menu-item icon="favorite" label="Favorite" href="http://www.polymer-project.org/"></polymer-ui-menu-item> |
+ * |
+ * If you want more control on the link, e.g. specify the target for where to |
+ * open the linked document, you can put <a> directly inside the menu-item. |
+ * |
+ * Example: |
+ * |
+ * <polymer-ui-menu-item icon="favorite" label="Favorite"> |
+ * <a href="http://www.polymer-project.org/" target="_self"></a> |
+ * </polymer-ui-menu-item> |
+ * |
+ * @attribute href |
+ * @type string |
+ * @default '' |
+ */ |
+--> |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html"> |
+<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html"> |
+ |
+<polymer-element name="polymer-ui-menu-item" extends="polymer-ui-theme-aware" attributes="src label icon item href"> |
+ <template> |
+ <link rel="stylesheet" href="polymer-ui-menu-item.css"> |
+ <polymer-ui-icon src="{{src}}" icon="{{icon}}" showing?="{{icon || src}}"></polymer-ui-icon> |
+ <span id="label">{{label}}<content></content></span> |
+ <a id="link" href="{{href}}" hidden?="{{!href}}"></a> |
+ </template> |
+ <script> |
+ Polymer('polymer-ui-menu-item', { |
+ label: '', |
+ // calc item's offset middle pos instead of using offsetTop/Height |
+ // directly which requires to wait for submenu's collapsing transition to |
+ // complete first before it can return the correct pos. |
+ getOffsetMiddle: function() { |
+ var p = this.parentNode; |
+ if (p) { |
+ var i = Array.prototype.indexOf.call(p.items, this); |
+ var h = this.getItemHeight(); |
+ return i * h + h/2 + p.items[0].offsetTop; |
+ } |
+ }, |
+ getItemHeight: function() { |
+ return this.offsetHeight; |
+ } |
+ }); |
+ </script> |
+</polymer-element> |