Directory

← Back

SidePanel

Animated side panel with vertical tab sheet on the right side

Author

Rating

Popularity

<100

This component has the main content and the side panel, which is opened/closed with animation. The side panel contains a vertical tab sheet that can be opened by the user clicking on the tab header.

The development of this addon was sponsored by United Security Providers.

Sample code

		final SidePanel sidePanel = new SidePanel();
		sidePanel.setSizeFull();

		// lazy init tab
		final SidePanelTab tab1 = sidePanel.addTab(FontAwesome.ADJUST,
				"Lazy init", null);
		
		final SidePanelTab tab2 = sidePanel.addTab(FontAwesome.ADJUST,
				"Tab number 2", new Label("Tab number 2 content"));

		sidePanel.addTabChangeListener(new TabChangeListener() {
			@Override
			public void tabChanged(SidePanelTab newTab) {
				Notification.show(newTab == null ? "No tab selected" : newTab
						.getDescription());

				// lazy tab initialization
				if (tab1.equals(newTab) && tab1.getContent() == null) {
					tab1.setContent(new Label("Lazy init content"));
				}
			}
		});

		Button button = new Button("Open tab number 2",
				new Button.ClickListener() {
					@Override
					public void buttonClick(ClickEvent event) {
						sidePanel.setSelectedTab(tab2);
					}
				});

....

		final Button toggleButton = new Button("Open/Close", new ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				sidePanel.toggle();
			}
		});
		
		final Label statusLabel = new Label(sidePanel.isOpen() ? "Open" : "Closed");
		
		sidePanel.addOpenPanelListener(new OpenCloseListener() {
			@Override
			public void panelStatusChanged(boolean open) {
				statusLabel.setValue(sidePanel.isOpen() ? "Open" : "Closed");
			}
		});


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
2015-06-18
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.3+
Browser
Firefox
Safari
Google Chrome
Internet Explorer
Internet Explorer

SidePanel - Vaadin Add-on Directory

Animated side panel with vertical tab sheet on the right side SidePanel - Vaadin Add-on Directory
This component has the main content and the side panel, which is opened/closed with animation. The side panel contains a vertical tab sheet that can be opened by the user clicking on the tab header. The development of this addon was sponsored by [United Security Providers](https://www.united-security-providers.ch).
Online