| <!-- |
| 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> |