TabSheet

A basic TabSheet component composed from Tabs, Tab etc. for Vaadin 24, Vaadin 23.3.x and Vaadin 14.x.

View larger

Close

View larger

Close

View larger

Close

This is a basic TabSheet composed using vaadin-tabs and vaadin-tab. The client side of the component is implemented as web component using LitElement, written in TypeScript.

The component has been implemented using Lumo styles and thus should fit fully with other stock Vaadin components.

There is a longer story about how this component was created in this blog post: https://vaadin.com/blog/creating-a-custom-component-with-lit

Note, from Vaadin 23.3.0 onwards there is also official version of TabSheet component in the framework. The API of it is a bit different than this add-on version, but the both are roughly similar implementations.

Sample code

    public View() {
        TabSheet tabSheet = new TabSheet();
tabSheet.getElement().getThemeList().add(TabsVariant.LUMO_CENTERED.getVariantName());
        tabSheet.addTab("First tab", createTab1Content(), VaadinIcon.TAB);
        tabSheet.addTab("Second tab", createTab2Content());
         tabSheet.addTab("Third tab", createTab3Content());
        tabSheet.addTab("Fourth tab", createTab4Content());

        // Add tab change listener
        tabSheet.addTabChangedListener(event -> {
            Notification.show("Index: '"+event.getIndex()+"' Caption: '"+event.getCaption()+"' Tab: '"+event.getTab()+"'");
        });
        tabSheet.setWidth("50%");
        tabSheet.setHeight("250px");

        // Set selected tab
        tabSheet.setSelected(2);

        // Rename the first tab
        tabSheet.setCaption(tabSheet.getTab(0), "First area");
        
        add(tabSheet);
    }

import { customElement, property, css, html, LitElement } from 'lit-element';

@customElement('tab-sheet-view')
export class TabSheetView extends LitElement {

  render() {
    return html`
      <tab-sheet theme="icon-on-top" id="tabsheet">
         <div id="sheet1" tabicon="vaadin:dashboard" tabcaption="Sheet 1">This content for the first tab</div>
         <div id="sheet2" tabicon="vaadin:database" tabcaption="Sheet 2">Second tab has different content</div>
         <div id="sheet3" tabicon="vaadin:trash" tabcaption="Sheet 3">Third to be removed</div>
      </tab-sheet>
    `;
  }
}

Links

• View on GitHub
• Online Demo

Compatibility