Tabs

Description #

<vaadin-tabs> is a Web Component for organizing and grouping content into sections.

<vaadin-tabs selected="4">
  <vaadin-tab>Page 1</vaadin-tab>
  <vaadin-tab>Page 2</vaadin-tab>
  <vaadin-tab>Page 3</vaadin-tab>
  <vaadin-tab>Page 4</vaadin-tab>
</vaadin-tabs>

Styling #

The following shadow DOM parts are available for styling:

The following state attributes are available for styling:

See Styling Components documentation.

Properties #

disabled #

Type: boolean

If true, the user cannot interact with this element. When the element is disabled, the selected item is not updated when selected property is changed.

items #

Type: Element[] | undefined

The list of items from which a selection can be made. It is populated from the elements passed to the light DOM, and updated dynamically when adding or removing items.

The item elements must implement Vaadin.ItemMixin.

Note: unlike <vaadin-combo-box>, this property is read-only, so if you want to provide items by iterating array of data, you have to use dom-repeat and place it to the light DOM.

orientation #

Type: "horizontal" | "vertical"

Set tabs disposition. Possible values are horizontal|vertical

selected #

Type: number | null | undefined

The index of the selected tab.

Methods #

focus #

Type: (options?: FocusOptions | undefined) => void

Events #

items-changed #

Type: TabsItemsChangedEvent

Fired when the items property changes.

selected-changed #

Type: TabsSelectedChangedEvent

Fired when the selection is changed. Not fired when used in multiple selection mode.

Types #

TabsItemsChangedEvent #

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

TabsSelectedChangedEvent #

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