TabSheet
A basic TabSheet component composed from Tabs, Tab etc. for Vaadin 24, Vaadin 23.3.x and Vaadin 14.x.
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
Compatibility
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.2
- Minor fix in theme property handling
- Released
- 2023-04-01
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23+
- Vaadin 22 in 1.0.0
- Vaadin 23 in 1.0.0
- Vaadin 14 in 0.1.0
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge