1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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<!--
18Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
19
20`paper-card` is a container with a drop shadow.
21
22Example:
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
31Example - top card image:
32
33    <paper-card heading="Card Title" image="/path/to/image.png">
34      ...
35    </paper-card>
36
37### Accessibility
38
39By default, the `aria-label` will be set to the value of the `heading` attribute.
40
41### Styling
42
43The following custom properties and mixins are available for styling:
44
45Custom 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