Directory

← Back

Drawer

An animated component to hide or show information

Author

Rating

Popularity

<100

The Drawer gives you the opportunity to have information (UI widgets) available the visitor, but only show them when the information is needed. Click the header, and the information is smoothly revealed. Click again, and it's rolled back in.

Even though IE6 and IE7 are not explicitly supported, they seem to work somewhat decently with certain components. YMMV.

Sample code

@SuppressWarnings("serial")
public class DrawerTest extends Application {
    @Override
    public void init() {
        final Window mainWindow = new Window("Testproject Application");
        setMainWindow(mainWindow);

        final Layout layout = new VerticalLayout();
        layout.addComponent(new Button("First"));
        layout.addComponent(new Button("Second"));

        final Drawer drawer = new Drawer("Button drawer", layout);
        // Drawer is designed to work best with explicitly defined widths.
        drawer.setWidth("20em");
        mainWindow.addComponent(drawer);
    }
}

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

  • This version is tested with 6.3.3, but it will most probably work with 6.2 upwards.
  • Fixed a bug with pre-opened drawers
  • Fixed graphical glitch with an animated closing drawer
  • Fixed a height-related bug with closing a drawer without animation
Released
2010-09-17
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.3+
Vaadin 6.2+ in 1.1.5
Browser
Internet Explorer
Firefox
Opera
Safari

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online