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="../iron-flex-layout/iron-flex-layout.html"> 13 <link rel="import" href="../paper-styles/typography.html"> 14 <link rel="import" href="paper-item-behavior.html"> 15 <link rel="import" href="paper-item-shared-styles.html"> 16 17 <!-- 18 `<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list 19 item with a fixed-width icon area, according to Material Design. This is useful if the icons are of 20 varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child 21 node with the attribute `item-icon` is placed in the icon area. 22 23 <paper-icon-item> 24 <iron-icon icon="favorite" item-icon></iron-icon> 25 Favorite 26 </paper-icon-item> 27 <paper-icon-item> 28 <div class="avatar" item-icon></div> 29 Avatar 30 </paper-icon-item> 31 32 ### Styling 33 34 The following custom properties and mixins are available for styling: 35 36 Custom property | Description | Default 37 ------------------------------|------------------------------------------------|---------- 38 `--paper-item-icon-width` | Width of the icon area | `56px` 39 `--paper-item-icon` | Mixin applied to the icon area | `{}` 40 `--paper-icon-item` | Mixin applied to the item | `{}` 41 `--paper-item-selected-weight`| The font weight of a selected item | `bold` 42 `--paper-item-selected` | Mixin applied to selected paper-items | `{}` 43 `--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color` 44 `--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` 45 `--paper-item-focused` | Mixin applied to focused paper-items | `{}` 46 `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` 47 --> 48 49 <dom-module id="paper-icon-item"> 50 <template> 51 <style include="paper-item-shared-styles"></style> 52 <style> 53 :host { 54 @apply(--layout-horizontal); 55 @apply(--layout-center); 56 @apply(--paper-font-subhead); 57 58 @apply(--paper-item); 59 @apply(--paper-icon-item); 60 } 61 62 .content-icon { 63 @apply(--layout-horizontal); 64 @apply(--layout-center); 65 66 width: var(--paper-item-icon-width, 56px); 67 @apply(--paper-item-icon); 68 } 69 </style> 70 71 <div id="contentIcon" class="content-icon"> 72 <content select="[item-icon]"></content> 73 </div> 74 <content></content> 75 </template> 76 77 <script> 78 Polymer({ 79 is: 'paper-icon-item', 80 81 behaviors: [ 82 Polymer.PaperItemBehavior 83 ] 84 }); 85 </script> 86 </dom-module> 87
