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

Side by Side 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 unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-material/paper-material.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14 <link rel="import" href="../iron-image/iron-image.html">
15
16 <!--
17 Material design: [Cards](https://www.google.com/design/spec/components/cards.htm l)
18
19 `paper-card` is a container with a drop shadow.
20
21 Example:
22
23 <paper-card heading="Card Title">
24 <div class="card-content">Some content</div>
25 <div class="card-actions">
26 <paper-button>Some action</paper-button>
27 </div>
28 </paper-card>
29
30 Example - top card image:
31
32 <paper-card heading="Card Title" image="/path/to/image.png">
33 ...
34 </paper-card>
35
36 ### Accessibility
37
38 By default, the `aria-label` will be set to the value of the `heading` attribute .
39
40 ### Styling
41
42 The following custom properties and mixins are available for styling:
43
44 Custom property | Description | Default
45 ----------------|-------------|----------
46 `--paper-card-header-color` | The color of the header text | `#000`
47 `--paper-card-header` | Mixin applied to the card header section | `{}`
48 `--paper-card-header-text` | Mixin applied to the title in the card header secti on | `{}`
49 `--paper-card-header-image` | Mixin applied to the image in the card header sect ion | `{}`
50 `--paper-card-header-image-text` | Mixin applied to the text overlapping the ima ge in the card header section | `{}`
51 `--paper-card-content` | Mixin applied to the card content section| `{}`
52 `--paper-card-actions` | Mixin applied to the card action section | `{}`
53 `--paper-card` | Mixin applied to the card | `{}`
54
55 @group Paper Elements
56 @element paper-card
57 @demo demo/index.html
58 -->
59
60 <dom-module id="paper-card">
61 <template>
62 <style include="paper-material">
63 :host {
64 display: inline-block;
65 position: relative;
66 box-sizing: border-box;
67
68 background: #fff;
69 border-radius: 2px;
70 @apply(--paper-card);
71 }
72
73 /* IE 10 support for HTML5 hidden attr */
74 [hidden] {
75 display: none !important;
76 }
77
78 .header {
79 position: relative;
80 border-top-left-radius: inherit;
81 border-top-right-radius: inherit;
82 overflow: hidden;
83 @apply(--paper-card-header);
84 }
85
86 .header iron-image {
87 width: 100%;
88 --iron-image-width: 100%;
89 pointer-events: none;
90 @apply(--paper-card-header-image);
91 }
92
93 .header .title-text {
94 padding: 16px;
95 font-size: 24px;
96 font-weight: 400;
97 color: var(--paper-card-header-color, #000);
98 @apply(--paper-card-header-text);
99 }
100
101 .header .title-text.over-image {
102 position: absolute;
103 bottom: 0px;
104 @apply(--paper-card-header-image-text);
105 }
106
107 :host ::content .card-content {
108 padding: 16px;
109 position:relative;
110 @apply(--paper-card-content);
111 }
112
113 :host ::content .card-actions {
114 border-top: 1px solid #e8e8e8;
115 padding: 5px 16px;
116 position:relative;
117 @apply(--paper-card-actions);
118 }
119 </style>
120
121 <div class="header">
122 <iron-image hidden$="[[!image]]" src="[[image]]" preload$="[[preloadImage] ]" fade$="[[fadeImage]]"></iron-image>
123 <div hidden$="[[!heading]]" class$="[[_computeHeadingClass(image)]]">[[hea ding]]</div>
124 </div>
125
126 <content></content>
127 </template>
128
129 </dom-module>
130
131 <script>
132
133 Polymer({
134
135 is: 'paper-card',
136
137 properties: {
138
139 /**
140 * The title of the card.
141 */
142 heading: {
143 type: String,
144 value: '',
145 observer: '_headingChanged'
146 },
147
148 /**
149 * The url of the title image of the card.
150 */
151 image: {
152 type: String,
153 value: ''
154 },
155
156 /**
157 * When `true`, any change to the image url property will cause the
158 * `placeholder` image to be shown until the image is fully rendered.
159 */
160 preloadImage: {
161 type: Boolean,
162 value: false
163 },
164
165 /**
166 * When `preloadImage` is true, setting `fadeImage` to true will cause the
167 * image to fade into place.
168 */
169 fadeImage: {
170 type: Boolean,
171 value: false
172 },
173
174 /**
175 * The z-depth of the card, from 0-5.
176 */
177 elevation: {
178 type: Number,
179 value: 1,
180 reflectToAttribute: true
181 },
182
183 /**
184 * Set this to true to animate the card shadow when setting a new
185 * `z` value.
186 */
187 animatedShadow: {
188 type: Boolean,
189 value: false
190 },
191
192 /**
193 * Read-only property used to pass down the `animatedShadow` value to
194 * the underlying paper-material style (since they have different names).
195 */
196 animated: {
197 type: Boolean,
198 reflectToAttribute: true,
199 readOnly: true,
200 computed: '_computeAnimated(animatedShadow)'
201 }
202 },
203
204 _headingChanged: function(heading) {
205 var label = this.getAttribute('aria-label');
206 this.setAttribute('aria-label', heading);
207 },
208
209 _computeHeadingClass: function(image) {
210 var cls = 'title-text';
211 if (image)
212 cls += ' over-image';
213 return cls;
214 },
215
216 _computeAnimated: function(animatedShadow) {
217 return animatedShadow;
218 }
219 });
220 </script>
OLDNEW
« 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