third_party/polymer/components/core-item/core-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 `core-item` is a simple line-item object: a label and/or an icon that can also
  12 act as a link.
  13
  14 Example:
  15
  16     <core-item icon="settings" label="Settings"></core-item>
  17
  18 To use as a link, put &lt;a&gt; element in the item.
  19
  20 Example:
  21
  22     <core-item icon="settings" label="Settings">
  23       <a href="#settings" target="_self"></a>
  24     </core-item>
  25
  26 @group Polymer Core Elements
  27 @element core-item
  28 @homepage github.io
  29 -->
  30
  31 <link rel="import" href="../core-icon/core-icon.html">
  32
  33 <polymer-element name="core-item" attributes="label icon src" horizontal center layout>
  34 <template>
  35   <link rel="stylesheet" href="core-item.css">
  36   <template if="{{icon || src}}">
  37     <core-icon src="{{src}}" id="icon" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
  38   </template>
  39   <div id="label">{{label}}</div>
  40   <content></content>
  41 </template>
  42 <script>
  43
  44   Polymer('core-item', {
  45
  46     /**
  47      * The URL of an image for the icon.
  48      *
  49      * @attribute src
  50      * @type string
  51      * @default ''
  52      */
  53
  54     /**
  55      * Specifies the icon from the Polymer icon set.
  56      *
  57      * @attribute icon
  58      * @type string
  59      * @default ''
  60      */
  61
  62     /**
  63      * Specifies the label for the menu item.
  64      *
  65      * @attribute label
  66      * @type string
  67      * @default ''
  68      */
  69
  70   });
  71
  72 </script>
  73 </polymer-element>