Directory

← Back

TabSheet

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

Author

Rating

Popularity

200+

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>
    `;
  }
}

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

Version 1.8.1

  • Fix imports in lit-components for Vaadin 24 compatibility, works also with 23.3.
Released
2023-04-01
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Vaadin 14 in 0.3.0
Vaadin 23 in 1.8.0
Vaadin 22 in 1.4.1
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online