Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(104)

Unified Diff: polymer_1.2.3/bower_components/paper-card/paper-card.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: polymer_1.2.3/bower_components/paper-card/paper-card.html
diff --git a/polymer_1.2.3/bower_components/paper-card/paper-card.html b/polymer_1.2.3/bower_components/paper-card/paper-card.html
new file mode 100644
index 0000000000000000000000000000000000000000..e4cb0ae25df92aa68ec7d2f929c8dd25901cda41
--- /dev/null
+++ b/polymer_1.2.3/bower_components/paper-card/paper-card.html
@@ -0,0 +1,220 @@
+<!--
+@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="../paper-material/paper-material.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-image/iron-image.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-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: #fff;
+ border-radius: 2px;
+ @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 {
+ 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>
+
+</dom-module>
+
+<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>
« no previous file with comments | « polymer_1.2.3/bower_components/paper-card/index.html ('k') | polymer_1.2.3/bower_components/paper-card/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698