Home | History | Annotate | Download | only in paper-item 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      8 -->
      9 
     10 <!--
     11 @group Paper Elements
     12 
     13 `paper-item` is a list-item object for use in menus. It may contain and icon and/or
     14 a text label.
     15 
     16 Example:
     17 
     18     <core-menu>
     19         <paper-item icon="refresh" label="Refresh"></paper-item>
     20         <paper-item label="Help"></paper-item>
     21         <paper-item label="Sign Out"></paper-item>
     22     </core-menu>
     23 
     24 To use as a link, put an `&lt;a&gt;` element in the item.
     25 
     26 Example:
     27 
     28     <paper-item icon="home" label="Home">
     29         <a href="http://www.polymer-project.org"></a>
     30     </paper-item>
     31 
     32 @class paper-item
     33 -->
     34 
     35 <link href="../polymer/polymer.html" rel="import">
     36 <link href="../core-icon/core-icon.html" rel="import">
     37 <link href="../paper-ripple/paper-ripple.html" rel="import">
     38 
     39 <link href="paper-item.css" rel="stylesheet" shim-shadowdom>
     40 
     41 <polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>
     42 
     43   <template>
     44 
     45     <paper-ripple id="ripple"></paper-ripple>
     46 
     47     <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
     48     <div id="label">{{label}}</div>
     49     <content></content>
     50   </template>
     51 
     52   <script>
     53     Polymer('paper-item', {
     54 
     55       publish: {
     56 
     57         /**
     58          * The label for the item.
     59          *
     60          * @attribute label
     61          * @type string
     62          * @default ''
     63          */
     64         label: '',
     65 
     66         /**
     67          * (optional) The URL of an image for an icon to use in the button.
     68          * Should not use `icon` property if you are using this property.
     69          *
     70          * @attribute iconSrc
     71          * @type string
     72          * @default ''
     73          */
     74         iconSrc: '',
     75 
     76         /**
     77          * (optional) Specifies the icon name or index in the set of icons
     78          * available in the icon set. If using this property, load the icon
     79          * set separately where the icon is used. Should not use `src`
     80          * if you are using this property.
     81          *
     82          * @attribute icon
     83          * @type string
     84          * @default ''
     85          */
     86         icon: ''
     87 
     88       },
     89 
     90       eventDelegates: {
     91         'down': 'downAction',
     92         'up': 'upAction'
     93       },
     94 
     95       downAction: function(e) {
     96         this.$.ripple.downAction(e);
     97       },
     98 
     99       upAction: function(e) {
    100         this.$.ripple.upAction(e);
    101       }
    102     });
    103   </script>
    104 </polymer-element>
    105