Vaadin WC API reference

TabSheet

View as MD

Description

<vaadin-tabsheet> is a Web Component for organizing and grouping content into scrollable panels. The panels can be switched between by using tabs.

<vaadin-tabsheet>
  <div slot="prefix">Prefix</div>
  <div slot="suffix">Suffix</div>

  <vaadin-tabs slot="tabs">
    <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
    <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
    <vaadin-tab id="tab-3">Tab 3</vaadin-tab>
  </vaadin-tabs>

  <div tab="tab-1">Panel 1</div>
  <div tab="tab-2">Panel 2</div>
  <div tab="tab-3">Panel 3</div>
</vaadin-tabsheet>

Styling

The following shadow DOM parts are exposed for styling:

Part name Description
tabs-container The container for the slotted prefix, tabs and suffix
content The container for the slotted panels

The following state attributes are available for styling:

Attribute Description
loading Set when a tab without associated content is selected
overflow Set to top, bottom, start, end, all of them, or none.

See Styling Components documentation.

Properties

items

Type: Tab[] | undefined

The list of <vaadin-tab>s from which a selection can be made. It is populated from the elements passed inside the slotted <vaadin-tabs>, and updated dynamically when adding or removing items.

Note: unlike <vaadin-combo-box>, this property is read-only.

selected

Type: number | null | undefined

The index of the selected tab.

Events

items-changed

Type: TabSheetItemsChangedEvent

Fired when the items property changes.

selected-changed

Type: TabSheetSelectedChangedEvent

Fired when the selected property changes.

Types

TabSheetItemsChangedEvent 

/**
 * Fired when the `items` property changes.
 */
export type TabSheetItemsChangedEvent = CustomEvent<{ value: Tab[] }>;

TabSheetSelectedChangedEvent 

/**
 * Fired when the `selected` property changes.
 */
export type TabSheetSelectedChangedEvent = CustomEvent<{ value: number }>;