diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-card/paper-card.html')
| -rwxr-xr-x | catapult/third_party/polymer/components/paper-card/paper-card.html | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-card/paper-card.html b/catapult/third_party/polymer/components/paper-card/paper-card.html new file mode 100755 index 00000000..20c462c4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-card/paper-card.html @@ -0,0 +1,226 @@ +<!-- +@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> |