Dock
A menu with fisheye / zoom functionality
This is a Add-On for creating a simple menu that has a desktop like fish eye effect.
Future plans
- Item separators
- Item bounce for notifying about changes (when Vaadin 7.1 comes out)
- Ability to hide/show dock when area is hovered upon
Sample code
CssLayout layout = new CssLayout(); Dock dock = new Dock(); dock.addStyleName("dock_bottom"); dock.setSize(50); dock.setSizeMax(150); dock.setAlignment(Alignment.BOTTOM); dock.setLabelPosition(LabelPosition.TOP_CENTER); dock.addClickListener(this); DockItem item = new DockItem("Logout", new ThemeResource("logout.png")); dock.addItem(item); layout.addComponent(dock);
.dock_bottom { position: fixed; bottom: 0; display: block; left: 50%; right: 50%; margin-left: -25px; }
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
- Released
- 2013-01-25
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.0+
- Browser
- Internet Explorer
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer