SidePanel

Animated side panel with vertical tab sheet on the right side

View larger

Close

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");
			}
		});

Links

• Online Demo
• Source Code

Compatibility