Directory

← Back

Dock

A menu with fisheye / zoom functionality

Author

Rating

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

(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

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
Online