Directory

← Back

paged-tabs

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

Author

Rating

Popularity

100+

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

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 10 in 1.0.0
Vaadin 13 in 1.2.0
Browser
N/A

paged-tabs - Vaadin Add-on Directory

A tabsheet component with multiple tabs that automatically show the page content when a tab is clicked paged-tabs - Vaadin Add-on Directory
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: ```Java 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: ```Java tabs.add("Closable", new Span("Close me"), false); ``` Get a `Tab` reference: ```Java Tab tab = tabs.add("Tab caption", component); ``` Add a selection listener: ```Java tabs.addSelectedChangeListener(selectedTab -> { ... }); ``` Set a close listener: ```java tabs.setCloseListener(closableTab, closedTab -> { ... }); ``` Get text by `Tab` (captions must be unique): ```java String textOnTab = tabs.getText(tab); ``` Get `Tab` by text: ```java Tab tab = tabs.getTab("Tab caption"); ``` Get `Component` by tab: ```java Component component = tabs.getComponent(tab); ``` Close a tab: ```java tabs.close(tab); ``` Select a tab: ```java tabs.select(tab); ``` Get selected tab: ```java Tab tab = tabs.getSelectedTab(); ``` Count tabs: ```java int count = tabs.count(); ```
Online