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

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../paper-styles/paper-styles.html">
  13
  14 <!--
  15 `<paper-icon-item>` is a convenience element to make an item with icon. It is a non interactive list
  16 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
  17 varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child
  18 node with the attribute `item-icon` is placed in the icon area.
  19
  20     <paper-icon-item>
  21       <iron-icon icon="favorite" item-icon></iron-icon>
  22       Favorite
  23     </paper-icon-item>
  24     <paper-icon-item>
  25       <div class="avatar" item-icon></div>
  26       Avatar
  27     </paper-icon-item>
  28
  29 ### Styling
  30
  31 The following custom properties and mixins are available for styling:
  32
  33 Custom property | Description | Default
  34 ----------------|-------------|----------
  35 `--paper-item-icon-width` | Width of the icon area     | `56px`
  36 `--paper-icon-item`       | Mixin applied to the item  | `{}`
  37
  38 -->
  39
  40 <dom-module id="paper-icon-item">
  41
  42   <link rel="import" type="css" href="paper-item-shared.css">
  43
  44   <style>
  45
  46     :host {
  47       @apply(--layout-horizontal);
  48       @apply(--layout-center);
  49       @apply(--paper-font-subhead);
  50
  51       @apply(--paper-item);
  52       @apply(--paper-icon-item);
  53     }
  54
  55     .content-icon {
  56       width: var(--paper-item-icon-width, 56px);
  57     }
  58
  59   </style>
  60
  61   <template>
  62     <div id="contentIcon" class="content-icon layout horizontal center">
  63       <content select="[item-icon]"></content>
  64     </div>
  65     <content></content>
  66   </template>
  67
  68 </dom-module>
  69
  70 <script>
  71
  72 (function() {
  73
  74   Polymer({
  75
  76     is: 'paper-icon-item',
  77
  78     hostAttributes: {
  79       'role': 'listitem'
  80     }
  81
  82   });
  83
  84 })();
  85
  86 </script>