paged-tabs | Vaadin

A tabsheet component with multiple tabs that automatically show the page content when a tab is clicked

The current Vaadin's Tabs component doesn't include an API to show a Component when a tab is clicked. You have to code the logic to show and hide components depending on the selected tab. This component frees you from implementing such logic. Here's an example:

VerticalLayout container = new VerticalLayout();
PagedTabs tabs = new PagedTabs(container);
tabs.add("Tab caption 1", component1);
tabs.add("Tab caption 2", component2);
layout.add(tabs, container);

Make a tab non-closable as follows:

tabs.add("Closable", new Span("Close me"), false);

Get a Tab reference:

Tab tab = tabs.add("Tab caption", component);

Add a selection listener:

tabs.addSelectedChangeListener(selectedTab -> {
    ...
});

Set a close listener:

tabs.setCloseListener(closableTab, closedTab -> {
    ...
});

Get text by Tab (captions must be unique):

String textOnTab = tabs.getText(tab);

Get Tab by text:

Tab tab = tabs.getTab("Tab caption");

Get Component by tab:

Component component = tabs.getComponent(tab);

Close a tab:

tabs.close(tab);

Select a tab:

tabs.select(tab);

Get selected tab:

Tab tab = tabs.getSelectedTab();

Count tabs:

int count = tabs.count();

Install

Link to this version
BetaReleased 27 May 2020Apache License 2.0
Framework Support
Vaadin platform 14+
Install with
Release notes - Version 3.0.0

New API