third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/iron-image/index.html ('k') | third_party/polymer/v0_8/components-chromium/iron-image/iron-image-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(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 --><html><head><link rel="import" href="../polymer/polymer.html">

	10 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">

	11

	12 <!--

	13 `iron-image` is an element for displaying an image that provides useful sizing a nd

	14 preloading options not found on the standard `<img>` tag.

	15

	16 The `sizing` option allows the image to be either cropped (`cover`) or

	17 letterboxed (`contain`) to fill a fixed user-size placed on the element.

	18

	19 The `preload` option prevents the browser from rendering the image until the

	20 image is fully loaded. In the interim, either the element's CSS `background-col or`

	21 can be be used as the placeholder, or the `placeholder` property can be

	22 set to a URL (preferably a data-URI, for instant rendering) for an

	23 placeholder image.

	24

	25 The `fade` option (only valid when `preload` is set) will cause the placeholder

	26 image/color to be faded out once the image is rendered.

	27

	28 Examples:

	29

	30 Basically identical to <img src="..."> tag:

	31

	32 <iron-image src="http://lorempixel.com/400/400"></iron-image>

	33

	34 Will letterbox the image to fit:

	35

	36 <iron-image style="width:400px; height:400px;" sizing="contain"

	37 src="http://lorempixel.com/600/400"></iron-image>

	38

	39 Will crop the image to fit:

	40

	41 <iron-image style="width:400px; height:400px;" sizing="cover"

	42 src="http://lorempixel.com/600/400"></iron-image>

	43

	44 Will show light-gray background until the image loads:

	45

	46 <iron-image style="width:400px; height:400px; background-color: lightgray;"

	47 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>

	48

	49 Will show a base-64 encoded placeholder image until the image loads:

	50

	51 <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;b ase64,..."

	52 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>

	53

	54 Will fade the light-gray background out once the image is loaded:

	55

	56 <iron-image style="width:400px; height:400px; background-color: lightgray;"

	57 sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-ima ge>

	58

	59

	60 @group Iron Elements

	61 @element iron-image

	62 @demo demo/index.html

	63 -->

	64

	65 </head><body><dom-module id="iron-image">

	66

	67 <style>

	68

	69 :host {

	70 display: inline-block;

	71 overflow: hidden;

	72 position: relative;

	73 }

	74

	75 :host([sizing]) #img {

	76 display: none;

	77 }

	78

	79 #placeholder {

	80 background-color: inherit;

	81 opacity: 1;

	82 }

	83

	84 #placeholder.faded-out {

	85 transition: opacity 0.5s linear;

	86 opacity: 0;

	87 }

	88

	89 </style>

	90

	91 <template>

	92

	93 <img id="img" role="none" hidden$="[[_computeImageVisibility(sizing)]]">

	94 <div id="placeholder" hidden$="[[_computePlaceholderVisibility(fade,loaded,p reload)]]" class$="[[_computePlaceholderClassName(fade,loaded,preload)]]"></div>

	95 <content></content>

	96

	97 </template>

	98

	99 </dom-module>

	100

	101 <script src="iron-image-extracted.js"></script></body></html>

OLD	NEW