third_party/polymer/v1_0/components-chromium/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 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/paper-styles.html">
  11
  12 <!--
  13 `<paper-icon-item>` is a convenience element to make an item with icon. It is a non interactive list
  14 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
  15 varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child
  16 node with the attribute `item-icon` is placed in the icon area.
  17
  18     <paper-icon-item>
  19       <iron-icon icon="favorite" item-icon></iron-icon>
  20       Favorite
  21     </paper-icon-item>
  22     <paper-icon-item>
  23       <div class="avatar" item-icon></div>
  24       Avatar
  25     </paper-icon-item>
  26
  27 ### Styling
  28
  29 The following custom properties and mixins are available for styling:
  30
  31 Custom property | Description | Default
  32 ----------------|-------------|----------
  33 `--paper-item-icon-width` | Width of the icon area     | `56px`
  34 `--paper-icon-item`       | Mixin applied to the item  | `{}`
  35
  36 -->
  37
  38 </head><body><dom-module id="paper-icon-item">
  39
  40   <link rel="import" type="css" href="paper-item-shared.css">
  41
  42   <style>
  43
  44     :host {
  45       @apply(--layout-horizontal);
  46       @apply(--layout-center);
  47       @apply(--paper-font-subhead);
  48
  49       @apply(--paper-item);
  50       @apply(--paper-icon-item);
  51     }
  52
  53     .content-icon {
  54       width: var(--paper-item-icon-width, 56px);
  55     }
  56
  57   </style>
  58
  59   <template>
  60     <div id="contentIcon" class="content-icon layout horizontal center">
  61       <content select="[item-icon]"></content>
  62     </div>
  63     <content></content>
  64   </template>
  65
  66 </dom-module>
  67
  68 <script src="paper-icon-item-extracted.js"></script></body></html>