Directory

← Back

Flip

Add 3D flip effect to your components

Author

Contributors

Rating

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);
});

Links

Compatibility

(Loading compatibility data...)

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
Online