Flow 13 How Tabs Work

In Vaadin 8, creating a tabsheet and adding tabs to it was quite simple.

TabSheet tabs = new TabSheet();

tabs.addTab(formLayout1, "Form1");
tabs.addTab(formLayout2, "Form2");

With Flow 13, I am having a hard time applying the same concept above.

Tabs tabs = new Tabs();
Tab tab1 = new Tab("Form1");
Tab tab2 = new Tab("Form2");

// formlayout1 and formlayout2 are containers for textfields, comboboxes, etc.

tabs.add(tab1, tab2);

This simply does not work correctly. Can someone please elaborate the usage to Flow 13 tabs dealing with forms?


Tabs in Vaadin 13 are just the tabs, they don’t have a container for content. Take a look at https://vaadin.com/components/vaadin-tabs/java-examples for examples. See also https://vaadin.com/directory/component/paged-tabs for an add-on that works more like TabSheet in V8.

Thank you for the response. I do use paged-tabs in some cases, however, paged-tabs does not support scrolling at this time. I decided to use accordion instead and it’s working out well.

How do I add content to the tab? I’ve a horizontal layout which I want to show when a tab is clicked.

Use tabs.addSelectedChangeListener to add a listener when the selected tab is changed and show your horizontal layout there