Skip to content
This repository
Search
Pull requests
Issues
Marketplace
Explore
@PhantomVat
Sign out
Watch 25
Star 83  Fork 63 PolymerElements/paper-card
Code  Issues 9  Pull requests 2  Projects 0  Wiki  Insights
Branch: master Find file Copy path paper-card/paper-card.html
edc4c3c  on 26 Jun 2017
@jorgecasar jorgecasar Ensure hidden attribute works
13 contributors @notwaldorf @abdonrd @valdrinkoshi @nloewen @whenlit @ebidel @antonmoiseev @samccone @keanulee @jorgecasar @jbartz93 @antono @AaronLayton
RawBlameHistory
279 lines (228 sloc)  7.49 KB
<!--
@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="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-styles/element-styles/paper-material-styles.html">
<link rel="import" href="../bower_components/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" alt="image">
      ...
    </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-styles">
            :host {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                background-color: var(--paper-card-background-color, var(--primary-background-color));
                border-radius: 2px;
                @apply --paper-font-common-base;
                @apply --paper-card;
            }
            /* IE 10 support for HTML5 hidden attr */
            :host([hidden]), [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 ::slotted(.card-content) {
                padding: 16px;
                position:relative;
                @apply --paper-card-content;
            }
            :host ::slotted(.card-actions) {
                border-top: 1px solid #e8e8e8;
                padding: 5px 16px;
                position:relative;
                @apply --paper-card-actions;
            }
            :host([elevation="1"]) {
                @apply --paper-material-elevation-1;
            }
            :host([elevation="2"]) {
                @apply --paper-material-elevation-2;
            }
            :host([elevation="3"]) {
                @apply --paper-material-elevation-3;
            }
            :host([elevation="4"]) {
                @apply --paper-material-elevation-4;
            }
            :host([elevation="5"]) {
                @apply --paper-material-elevation-5;
            }
        </style>

        <div class="header">
            <iron-image hidden$="[[!image]]" aria-hidden$="[[_isHidden(image)]]" src="[[image]]" alt="[[alt]]" placeholder="[[placeholderImage]]" preload="[[preloadImage]]" fade="[[fadeImage]]"></iron-image>
            <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
        </div>

        <slot></slot>
    </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: ''
                },
                /**
                 * The text alternative of the card's title image.
                 */
                alt: {
                    type: String
                },
                /**
                 * 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
                },
                /**
                 * This image will be used as a background/placeholder until the src image has
                 * loaded. Use of a data-URI for placeholder is encouraged for instant rendering.
                 */
                placeholderImage: {
                    type: String,
                    value: null
                },
                /**
                 * 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)'
                }
            },
            /**
             * Format function for aria-hidden. Use the ! operator results in the
             * empty string when given a falsy value.
             */
            _isHidden: function(image) {
                return image ? 'false' : 'true';
            },
            _headingChanged: function(heading) {
                var currentHeading = this.getAttribute('heading'),
                    currentLabel = this.getAttribute('aria-label');
                if (typeof currentLabel !== 'string' || currentLabel === currentHeading) {
                    this.setAttribute('aria-label', heading);
                }
            },
            _computeHeadingClass: function(image) {
                return image ? ' over-image' : '';
            },
            _computeAnimated: function(animatedShadow) {
                return animatedShadow;
            }
        });
    </script>
</dom-module>