Contact us Create app

Directory

← Back

IronImage

Vaadin 10 component to integrate <iron-image>

Author

Rating

Links

Popularity

<100

IronImage

Vaadin 10 Java integration of https://github.com/PolymerElements/iron-image

Usage

Flow only

Adding an iron image as a component.

Component container = ...;
IronImage image = new IronImage("http://.../example.jpg");

// setting some basic properties
image.setSizing(IronImage.Sizing.COVER);
// ...

// styling
image.addClassName("example-image");
// image.setWidth("100px");

// activate preloading
image.setPlaceholder("http://.../small-placeholder.jpg");
image.activatePreload();

container.add(image);

Polymer + Flow

Using the image in a Polymer template.

<link rel="import" href="bower_components/iron-image/iron-image.html">
...
<iron-image id="example-image" class="example-image" 
    src="http://.../example.jpg" sizing="cover"
    preload placeholder="http://.../small-placeholder.jpg" />

and attaching it to Flow

@Route("...")
public class View ... {
    @Id("example-image")
    private IronImage image;
    
    @PostConstruct
    private void init() {
        ...
        // inform us, if the image source could not be loaded
        image.addErrorChangedListener(event -> System.out.println(event.isError() ? "error at loading image" : "everything is fine"));
        ...
    }	
}

Compatibility

(Loading compatibility data...)

Last updated: 2018-08-13

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • support for Vaadin 10.0.3
Released
2018-08-13
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 10
Browser
N/A

IronImage - Vaadin Add-on Directory

Vaadin 10 component to integrate IronImage - Vaadin Add-on Directory
# IronImage Vaadin 10 Java integration of https://github.com/PolymerElements/iron-image ## Usage ### Flow only Adding an iron image as a component. ``` Component container = ...; IronImage image = new IronImage("http://.../example.jpg"); // setting some basic properties image.setSizing(IronImage.Sizing.COVER); // ... // styling image.addClassName("example-image"); // image.setWidth("100px"); // activate preloading image.setPlaceholder("http://.../small-placeholder.jpg"); image.activatePreload(); container.add(image); ``` ### Polymer + Flow Using the image in a Polymer template. ``` ... ``` and attaching it to Flow ``` @Route("...") public class View ... { @Id("example-image") private IronImage image; @PostConstruct private void init() { ... // inform us, if the image source could not be loaded image.addErrorChangedListener(event -> System.out.println(event.isError() ? "error at loading image" : "everything is fine")); ... } } ```
Online