On This Page

An tab layout layouts panels in tabs, only one of the tab contents is visible at a time.

  • Fluent
  • Declarative

    TabLayout.builder()
              .tabs(List.of(
                      new Tab("Tab 1", new Text("Tab 1")),
                      new Tab("Tab 2", new Text("Tab 2")),
                      new Tab("Tab 3", new Text("Tab 3"))
              ))
              .build()
copy

    public class FormWithTabs {
    
      @Tab("Tab 1")
      Object panel1 = new Text("Panel 1");
    
      @Tab("Tab 2")
      Object panel2 = new Text("Panel 2");

      @Tab("Tab 3")
      Object panel3 = new Text("Panel 3");

    }
copy

Available properties

This is the list of available properties for a accordion layout:

PropertyDescriptionNotes
idid for this component
cssClasseslist of css classescontent of the css attribute
styleinline style attributescontent of the style attribute
fullWidthshortcut to set width:100%true/false
orientationone of horizontal, vertical
variantone of centered, equalwidth, minimal, small, bordered

You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/tabs