com.vaadin.polymer.iron.widget.IronImage Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from iron-image project by The Polymer Authors
* that is licensed with http://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.iron.widget;
import com.vaadin.polymer.iron.*;
import com.vaadin.polymer.*;
import com.vaadin.polymer.elemental.*;
import com.vaadin.polymer.PolymerWidget;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.core.client.JavaScriptObject;
/**
* iron-image is an element for displaying an image that provides useful sizing and
preloading options not found on the standard <img> tag.
* The sizing option allows the image to be either cropped (cover) or
letterboxed (contain) to fill a fixed user-size placed on the element.
* The preload option prevents the browser from rendering the image until the
image is fully loaded. In the interim, either the element’s CSS background-color
can be be used as the placeholder, or the placeholder property can be
set to a URL (preferably a data-URI, for instant rendering) for an
placeholder image.
* The fade option (only valid when preload is set) will cause the placeholder
image/color to be faded out once the image is rendered.
* Examples:
* Basically identical to <img src="..."> tag:
* <iron-image src="http://lorempixel.com/400/400"></iron-image>
*
*
*
Will letterbox the image to fit:
* <iron-image style="width:400px; height:400px;" sizing="contain"
* src="http://lorempixel.com/600/400"></iron-image>
*
*
*
Will crop the image to fit:
* <iron-image style="width:400px; height:400px;" sizing="cover"
* src="http://lorempixel.com/600/400"></iron-image>
*
*
*
Will show light-gray background until the image loads:
* <iron-image style="width:400px; height:400px; background-color: lightgray;"
* sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
*
*
*
Will show a base-64 encoded placeholder image until the image loads:
* <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..."
* sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
*
*
*
Will fade the light-gray background out once the image is loaded:
* <iron-image style="width:400px; height:400px; background-color: lightgray;"
* sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image>
*
*
*
*
*
* Custom property
* Description
* Default
*
*
*
*
* --iron-image-placeholderMixin applied to #placeholder
* {}
*
* --iron-image-widthSets the width of the wrapped image
* auto
*
* --iron-image-heightSets the height of the wrapped image
* auto
*
*
*/
public class IronImage extends PolymerWidget {
/**
* Default Constructor.
*/
public IronImage() {
this("");
}
/**
* Constructor used by UIBinder to create widgets with content.
*/
public IronImage(String html) {
super(IronImageElement.TAG, IronImageElement.SRC, html);
}
/**
* Gets a handle to the Polymer object's underlying DOM element.
*/
public IronImageElement getPolymerElement() {
return (IronImageElement) getElement();
}
/**
* Can be used to set the width of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @property width
* @type Number
*
*/
public double getWidth() {
return getPolymerElement().getWidth();
}
/**
* Can be used to set the width of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @property width
* @type Number
*
*/
public void setWidth(double value) {
getPolymerElement().setWidth(value);
}
/**
* When preload is true, setting fade to true will cause the image to
fade into place.
*
* JavaScript Info:
* @property fade
* @type Boolean
*
*/
public boolean getFade() {
return getPolymerElement().getFade();
}
/**
* When preload is true, setting fade to true will cause the image to
fade into place.
*
* JavaScript Info:
* @property fade
* @type Boolean
*
*/
public void setFade(boolean value) {
getPolymerElement().setFade(value);
}
/**
* Can be used to set the height of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @property height
* @type Number
*
*/
public double getHeight() {
return getPolymerElement().getHeight();
}
/**
* Can be used to set the height of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @property height
* @type Number
*
*/
public void setHeight(double value) {
getPolymerElement().setHeight(value);
}
/**
* Read-only value that is true when the image is loaded.
*
* JavaScript Info:
* @property loaded
* @type Boolean
*
*/
public boolean getLoaded() {
return getPolymerElement().getLoaded();
}
/**
* Read-only value that is true when the image is loaded.
*
* JavaScript Info:
* @property loaded
* @type Boolean
*
*/
public void setLoaded(boolean value) {
getPolymerElement().setLoaded(value);
}
/**
* Read-only value that tracks the loading state of the image when the preload
option is used.
*
* JavaScript Info:
* @property loading
* @type Boolean
*
*/
public boolean getLoading() {
return getPolymerElement().getLoading();
}
/**
* Read-only value that tracks the loading state of the image when the preload
option is used.
*
* JavaScript Info:
* @property loading
* @type Boolean
*
*/
public void setLoading(boolean value) {
getPolymerElement().setLoading(value);
}
/**
* Read-only value that indicates that the last set src failed to load.
*
* JavaScript Info:
* @property error
* @type Boolean
*
*/
public boolean getError() {
return getPolymerElement().getError();
}
/**
* Read-only value that indicates that the last set src failed to load.
*
* JavaScript Info:
* @property error
* @type Boolean
*
*/
public void setError(boolean value) {
getPolymerElement().setError(value);
}
/**
* When true, any change to the src property will cause the placeholder
image to be shown until the new image has loaded.
*
* JavaScript Info:
* @property preload
* @type Boolean
*
*/
public boolean getPreload() {
return getPolymerElement().getPreload();
}
/**
* When true, any change to the src property will cause the placeholder
image to be shown until the new image has loaded.
*
* JavaScript Info:
* @property preload
* @type Boolean
*
*/
public void setPreload(boolean value) {
getPolymerElement().setPreload(value);
}
/**
* When true, the image is prevented from loading and any placeholder is
shown. This may be useful when a binding to the src property is known to
be invalid, to prevent 404 requests.
*
* JavaScript Info:
* @property preventLoad
* @type Boolean
*
*/
public boolean getPreventLoad() {
return getPolymerElement().getPreventLoad();
}
/**
* When true, the image is prevented from loading and any placeholder is
shown. This may be useful when a binding to the src property is known to
be invalid, to prevent 404 requests.
*
* JavaScript Info:
* @property preventLoad
* @type Boolean
*
*/
public void setPreventLoad(boolean value) {
getPolymerElement().setPreventLoad(value);
}
/**
* A short text alternative for the image.
*
* JavaScript Info:
* @property alt
* @type String
*
*/
public String getAlt() {
return getPolymerElement().getAlt();
}
/**
* A short text alternative for the image.
*
* JavaScript Info:
* @property alt
* @type String
*
*/
public void setAlt(String value) {
getPolymerElement().setAlt(value);
}
/**
* When a sizing option is used (cover or contain), this determines
how the image is aligned within the element bounds.
*
* JavaScript Info:
* @property position
* @type String
*
*/
public String getPosition() {
return getPolymerElement().getPosition();
}
/**
* When a sizing option is used (cover or contain), this determines
how the image is aligned within the element bounds.
*
* JavaScript Info:
* @property position
* @type String
*
*/
public void setPosition(String value) {
getPolymerElement().setPosition(value);
}
/**
* Sets a sizing option for the image. Valid values are contain (full
aspect ratio of the image is contained within the element and
letterboxed) or cover (image is cropped in order to fully cover the
bounds of the element), or null (default: image takes natural size).
*
* JavaScript Info:
* @property sizing
* @type String
*
*/
public String getSizing() {
return getPolymerElement().getSizing();
}
/**
* Sets a sizing option for the image. Valid values are contain (full
aspect ratio of the image is contained within the element and
letterboxed) or cover (image is cropped in order to fully cover the
bounds of the element), or null (default: image takes natural size).
*
* JavaScript Info:
* @property sizing
* @type String
*
*/
public void setSizing(String value) {
getPolymerElement().setSizing(value);
}
/**
* The URL of an image.
*
* JavaScript Info:
* @property src
* @type String
*
*/
public String getSrc() {
return getPolymerElement().getSrc();
}
/**
* The URL of an image.
*
* JavaScript Info:
* @property src
* @type String
*
*/
public void setSrc(String value) {
getPolymerElement().setSrc(value);
}
/**
* 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.
*
* JavaScript Info:
* @property placeholder
* @type String
*
*/
public String getPlaceholder() {
return getPolymerElement().getPlaceholder();
}
/**
* 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.
*
* JavaScript Info:
* @property placeholder
* @type String
*
*/
public void setPlaceholder(String value) {
getPolymerElement().setPlaceholder(value);
}
// Needed in UIBinder
/**
* Can be used to set the width of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @attribute width
*
*/
public void setWidth(String value) {
Polymer.property(this.getPolymerElement(), "width", value);
}
// Needed in UIBinder
/**
* Can be used to set the height of image (e.g. via binding); size may also be
set via CSS.
*
* JavaScript Info:
* @attribute height
*
*/
public void setHeight(String value) {
Polymer.property(this.getPolymerElement(), "height", value);
}
}