| <!-- |
| @license |
| Copyright (c) 2015 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 |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
| <link rel="import" href="../iron-image/iron-image.html"> |
| <link rel="import" href="../paper-material/paper-material.html"> |
| <link rel="import" href="../paper-styles/default-theme.html"> |
| |
| <!-- |
| Material design: [Cards](https://www.google.com/design/spec/components/cards.html) |
| |
| `paper-card` is a container with a drop shadow. |
| |
| Example: |
| |
| <paper-card heading="Card Title"> |
| <div class="card-content">Some content</div> |
| <div class="card-actions"> |
| <paper-button>Some action</paper-button> |
| </div> |
| </paper-card> |
| |
| Example - top card image: |
| |
| <paper-card heading="Card Title" image="/path/to/image.png"> |
| ... |
| </paper-card> |
| |
| ### Accessibility |
| |
| By default, the `aria-label` will be set to the value of the `heading` attribute. |
| |
| ### Styling |
| |
| The following custom properties and mixins are available for styling: |
| |
| Custom property | Description | Default |
| ----------------|-------------|---------- |
| `--paper-card-background-color` | The background color of the card | `--primary-background-color` |
| `--paper-card-header-color` | The color of the header text | `#000` |
| `--paper-card-header` | Mixin applied to the card header section | `{}` |
| `--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` |
| `--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` |
| `--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` |
| `--paper-card-content` | Mixin applied to the card content section| `{}` |
| `--paper-card-actions` | Mixin applied to the card action section | `{}` |
| `--paper-card` | Mixin applied to the card | `{}` |
| |
| @group Paper Elements |
| @element paper-card |
| @demo demo/index.html |
| --> |
| |
| <dom-module id="paper-card"> |
| <template> |
| <style include="paper-material"> |
| :host { |
| display: inline-block; |
| position: relative; |
| box-sizing: border-box; |
| background-color: var(--paper-card-background-color, --primary-background-color); |
| border-radius: 2px; |
| |
| @apply(--paper-font-common-base); |
| @apply(--paper-card); |
| } |
| |
| /* IE 10 support for HTML5 hidden attr */ |
| [hidden] { |
| display: none !important; |
| } |
| |
| .header { |
| position: relative; |
| border-top-left-radius: inherit; |
| border-top-right-radius: inherit; |
| overflow: hidden; |
| |
| @apply(--paper-card-header); |
| } |
| |
| .header iron-image { |
| display: block; |
| width: 100%; |
| --iron-image-width: 100%; |
| pointer-events: none; |
| |
| @apply(--paper-card-header-image); |
| } |
| |
| .header .title-text { |
| padding: 16px; |
| font-size: 24px; |
| font-weight: 400; |
| color: var(--paper-card-header-color, #000); |
| |
| @apply(--paper-card-header-text); |
| } |
| |
| .header .title-text.over-image { |
| position: absolute; |
| bottom: 0px; |
| |
| @apply(--paper-card-header-image-text); |
| } |
| |
| :host ::content .card-content { |
| padding: 16px; |
| position:relative; |
| |
| @apply(--paper-card-content); |
| } |
| |
| :host ::content .card-actions { |
| border-top: 1px solid #e8e8e8; |
| padding: 5px 16px; |
| position:relative; |
| |
| @apply(--paper-card-actions); |
| } |
| </style> |
| |
| <div class="header"> |
| <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage]]" fade$="[[fadeImage]]"></iron-image> |
| <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[heading]]</div> |
| </div> |
| |
| <content></content> |
| </template> |
| |
| <script> |
| Polymer({ |
| is: 'paper-card', |
| |
| properties: { |
| /** |
| * The title of the card. |
| */ |
| heading: { |
| type: String, |
| value: '', |
| observer: '_headingChanged' |
| }, |
| |
| /** |
| * The url of the title image of the card. |
| */ |
| image: { |
| type: String, |
| value: '' |
| }, |
| |
| /** |
| * When `true`, any change to the image url property will cause the |
| * `placeholder` image to be shown until the image is fully rendered. |
| */ |
| preloadImage: { |
| type: Boolean, |
| value: false |
| }, |
| |
| /** |
| * When `preloadImage` is true, setting `fadeImage` to true will cause the |
| * image to fade into place. |
| */ |
| fadeImage: { |
| type: Boolean, |
| value: false |
| }, |
| |
| /** |
| * The z-depth of the card, from 0-5. |
| */ |
| elevation: { |
| type: Number, |
| value: 1, |
| reflectToAttribute: true |
| }, |
| |
| /** |
| * Set this to true to animate the card shadow when setting a new |
| * `z` value. |
| */ |
| animatedShadow: { |
| type: Boolean, |
| value: false |
| }, |
| |
| /** |
| * Read-only property used to pass down the `animatedShadow` value to |
| * the underlying paper-material style (since they have different names). |
| */ |
| animated: { |
| type: Boolean, |
| reflectToAttribute: true, |
| readOnly: true, |
| computed: '_computeAnimated(animatedShadow)' |
| } |
| }, |
| |
| _headingChanged: function(heading) { |
| var label = this.getAttribute('aria-label'); |
| this.setAttribute('aria-label', heading); |
| }, |
| |
| _computeHeadingClass: function(image) { |
| var cls = 'title-text'; |
| if (image) |
| cls += ' over-image'; |
| return cls; |
| }, |
| |
| _computeAnimated: function(animatedShadow) { |
| return animatedShadow; |
| } |
| }); |
| </script> |
| </dom-module> |