Flip
Add 3D flip effect to your components
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
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 componentsWith 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.