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="../iron-image/iron-image.html"> 14 <link rel="import" href="../paper-material/paper-material.html"> 15 <link rel="import" href="../paper-styles/default-theme.html"> 16 17 <!-- 18 Material design: [Cards](https://www.google.com/design/spec/components/cards.html) 19 20 `paper-card` is a container with a drop shadow. 21 22 Example: 23 24 <paper-card heading="Card Title"> 25 <div class="card-content">Some content</div> 26 <div class="card-actions"> 27 <paper-button>Some action</paper-button> 28 </div> 29 </paper-card> 30 31 Example - top card image: 32 33 <paper-card heading="Card Title" image="/path/to/image.png"> 34 ... 35 </paper-card> 36 37 ### Accessibility 38 39 By default, the `aria-label` will be set to the value of the `heading` attribute. 40 41 ### Styling 42 43 The following custom properties and mixins are available for styling: 44 45 Custom property | Description | Default 46 ----------------|-------------|---------- 47 `--paper-card-background-color` | The background color of the card | `--primary-background-color` 48 `--paper-card-header-color` | The color of the header text | `#000` 49 `--paper-card-header` | Mixin applied to the card header section | `{}` 50 `--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` 51 `--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` 52 `--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` 53 `--paper-card-content` | Mixin applied to the card content section| `{}` 54 `--paper-card-actions` | Mixin applied to the card action section | `{}` 55 `--paper-card` | Mixin applied to the card | `{}` 56 57 @group Paper Elements 58 @element paper-card 59 @demo demo/index.html 60 --> 61 62 <dom-module id="paper-card"> 63 <template> 64 <style include="paper-material"> 65 :host { 66 display: inline-block; 67 position: relative; 68 box-sizing: border-box; 69 background-color: var(--paper-card-background-color, --primary-background-color); 70 border-radius: 2px; 71 72 @apply(--paper-font-common-base); 73 @apply(--paper-card); 74 } 75 76 /* IE 10 support for HTML5 hidden attr */ 77 [hidden] { 78 display: none !important; 79 } 80 81 .header { 82 position: relative; 83 border-top-left-radius: inherit; 84 border-top-right-radius: inherit; 85 overflow: hidden; 86 87 @apply(--paper-card-header); 88 } 89 90 .header iron-image { 91 display: block; 92 width: 100%; 93 --iron-image-width: 100%; 94 pointer-events: none; 95 96 @apply(--paper-card-header-image); 97 } 98 99 .header .title-text { 100 padding: 16px; 101 font-size: 24px; 102 font-weight: 400; 103 color: var(--paper-card-header-color, #000); 104 105 @apply(--paper-card-header-text); 106 } 107 108 .header .title-text.over-image { 109 position: absolute; 110 bottom: 0px; 111 112 @apply(--paper-card-header-image-text); 113 } 114 115 :host ::content .card-content { 116 padding: 16px; 117 position:relative; 118 119 @apply(--paper-card-content); 120 } 121 122 :host ::content .card-actions { 123 border-top: 1px solid #e8e8e8; 124 padding: 5px 16px; 125 position:relative; 126 127 @apply(--paper-card-actions); 128 } 129 </style> 130 131 <div class="header"> 132 <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image> 133 <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div> 134 </div> 135 136 <content></content> 137 </template> 138 139 <script> 140 Polymer({ 141 is: 'paper-card', 142 143 properties: { 144 /** 145 * The title of the card. 146 */ 147 heading: { 148 type: String, 149 value: '', 150 observer: '_headingChanged' 151 }, 152 153 /** 154 * The url of the title image of the card. 155 */ 156 image: { 157 type: String, 158 value: '' 159 }, 160 161 /** 162 * When `true`, any change to the image url property will cause the 163 * `placeholder` image to be shown until the image is fully rendered. 164 */ 165 preloadImage: { 166 type: Boolean, 167 value: false 168 }, 169 170 /** 171 * When `preloadImage` is true, setting `fadeImage` to true will cause the 172 * image to fade into place. 173 */ 174 fadeImage: { 175 type: Boolean, 176 value: false 177 }, 178 179 /** 180 * The z-depth of the card, from 0-5. 181 */ 182 elevation: { 183 type: Number, 184 value: 1, 185 reflectToAttribute: true 186 }, 187 188 /** 189 * Set this to true to animate the card shadow when setting a new 190 * `z` value. 191 */ 192 animatedShadow: { 193 type: Boolean, 194 value: false 195 }, 196 197 /** 198 * Read-only property used to pass down the `animatedShadow` value to 199 * the underlying paper-material style (since they have different names). 200 */ 201 animated: { 202 type: Boolean, 203 reflectToAttribute: true, 204 readOnly: true, 205 computed: '_computeAnimated(animatedShadow)' 206 } 207 }, 208 209 _headingChanged: function(heading) { 210 var label = this.getAttribute('aria-label'); 211 this.setAttribute('aria-label', heading); 212 }, 213 214 _computeHeadingClass: function(image) { 215 var cls = 'title-text'; 216 if (image) 217 cls += ' over-image'; 218 return cls; 219 }, 220 221 _computeAnimated: function(animatedShadow) { 222 return animatedShadow; 223 } 224 }); 225 </script> 226 </dom-module> 227
