Contact us Create app

Directory

← Back

Flip

Add 3D flip effect to your components

Author

Rating

Links

Popularity

<100

With Flip you can make your Vaadin components two sided using horizontal 3D turn effect. Flip can be triggered by:

  • On hover
  • On mouse click
  • Programmatically: Flip.flip();

Just create two Vaadin components for each side. Here using images:

    Image front = new Image(...));
    Image back = new Image(...));
    Flip flip = new Flip(front,
                         back,
                         Flip.FlipMode.HOVER);
    layout.addComponent(flip);

Check code highlight in sidebar for a full sample and the live demo application to see how it behaves.

Note: CSS3 3D Transforms are used for the effect and that is tested only with MS Edge, Firefox 43, Chrome 47 and Safari 9.

Sample code

Image front = new Image(null, new ExternalResource(FRONT_IMAGE_URL));

Image back = new Image(null, new ExternalResource(BACK_IMAGE_URL));

Flip flip = new Flip(front, back, Flip.FlipMode.HOVER);
flip.setHeight("400px");
flip.setWidth("400px");

layout.addComponent(flip);

flip.addFlipListener(f -> {
     Notification.show("Flipped", Notification.Type.TRAY_NOTIFICATION);
});

Compatibility

(Loading compatibility data...)

Last updated: 2016-02-14

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

  • Change: Keep the flip state when changing mode
  • Fix: removed unused scss reference in manifest
  • Fix: #2 "Grid appears blurred"
  • Fix: #1 "is Java 7 supported ?"
Released
2016-02-14
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.5+
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Internet Explorer

Flip - Vaadin Add-on Directory

Add 3D flip effect to your components Flip - Vaadin Add-on Directory
With Flip you can make your Vaadin components two sided using horizontal 3D turn effect. Flip can be triggered by: * On hover * On mouse click * Programmatically: Flip.flip(); Just create two Vaadin components for each side. Here using images: Image front = new Image(...)); Image back = new Image(...)); Flip flip = new Flip(front, back, Flip.FlipMode.HOVER); layout.addComponent(flip); Check code highlight in sidebar for a full sample and the [live demo application](http://sami.app.fi/flip) to see how it behaves. Note: CSS3 3D Transforms are used for the effect and that is tested only with MS Edge, Firefox 43, Chrome 47 and Safari 9.
Online