third_party/polymer/components/paper-item/paper-item.html

   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>