catapult/third_party/polymer/components/core-item/core-item.html

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

<!--
`core-item` is a simple line-item object: a label and/or an icon that can also 
act as a link.

Example:

    <core-item icon="settings" label="Settings"></core-item>
    
To use as a link, put &lt;a&gt; element in the item.

Example:

    <core-item icon="settings" label="Settings">
      <a href="#settings" target="_self"></a>
    </core-item>

@group Polymer Core Elements
@element core-item
@homepage github.io
-->

<link rel="import" href="../core-icon/core-icon.html">

<polymer-element name="core-item" attributes="label icon src" horizontal center layout>
<template>
  <link rel="stylesheet" href="core-item.css">
  <template if="{{icon || src}}">
    <core-icon src="{{src}}" id="icon" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
  </template>
  <div id="label">{{label}}</div>
  <content></content>
</template>
<script>

  Polymer('core-item', {
    
    /**
     * The URL of an image for the icon.
     *
     * @attribute src
     * @type string
     * @default ''
     */

    /**
     * Specifies the icon from the Polymer icon set.
     *
     * @attribute icon
     * @type string
     * @default ''
     */

    /**
     * Specifies the label for the menu item.
     *
     * @attribute label
     * @type string
     * @default ''
     */

  });

</script>
</polymer-element>