Directory

← Back

paged-tabs

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

Author

Contributors

Rating

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();

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

New API

Released
2020-05-27
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 13 in 1.2.0
Vaadin 10 in 1.1.2
Browser
N/A
Online