diff options
Diffstat (limited to 'third_party/polymer/components/paper-item/paper-item.html')
-rw-r--r-- | third_party/polymer/components/paper-item/paper-item.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/third_party/polymer/components/paper-item/paper-item.html b/third_party/polymer/components/paper-item/paper-item.html new file mode 100644 index 0000000..ceb1b8a --- /dev/null +++ b/third_party/polymer/components/paper-item/paper-item.html @@ -0,0 +1,104 @@ +<!-- +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.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +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.txt +--> + +<!-- +@group Paper Elements + +`paper-item` is a list-item object for use in menus. It may contain and icon and/or +a text label. + +Example: + + <core-menu> + <paper-item icon="refresh" label="Refresh"></paper-item> + <paper-item label="Help"></paper-item> + <paper-item label="Sign Out"></paper-item> + </core-menu> + +To use as a link, put an `<a>` element in the item. + +Example: + + <paper-item icon="home" label="Home"> + <a href="http://www.polymer-project.org"></a> + </paper-item> + +@class paper-item +--> + +<link href="../polymer/polymer.html" rel="import"> +<link href="../core-icon/core-icon.html" rel="import"> +<link href="../paper-ripple/paper-ripple.html" rel="import"> + +<link href="paper-item.css" rel="stylesheet" shim-shadowdom> + +<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout> + + <template> + + <paper-ripple id="ripple"></paper-ripple> + + <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon> + <div id="label">{{label}}</div> + <content></content> + </template> + + <script> + Polymer('paper-item', { + + publish: { + + /** + * The label for the item. + * + * @attribute label + * @type string + * @default '' + */ + label: '', + + /** + * (optional) The URL of an image for an icon to use in the button. + * Should not use `icon` property if you are using this property. + * + * @attribute iconSrc + * @type string + * @default '' + */ + iconSrc: '', + + /** + * (optional) Specifies the icon name or index in the set of icons + * available in the icon set. If using this property, load the icon + * set separately where the icon is used. Should not use `src` + * if you are using this property. + * + * @attribute icon + * @type string + * @default '' + */ + icon: '' + + }, + + eventDelegates: { + 'down': 'downAction', + 'up': 'upAction' + }, + + downAction: function(e) { + this.$.ripple.downAction(e); + }, + + upAction: function(e) { + this.$.ripple.upAction(e); + } + }); + </script> +</polymer-element> |