Documentation

Documentation

Tabs

Source: TypeScript / Java
Styling API reference for the Tab Sheet and Tabs components.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Tabsheet

Root element

vaadin-tabsheet

Tabs wrapper

vaadin-tabsheet::part(tabs-container)

Content wrapper

vaadin-tabsheet::part(content)

Content loading indicator

vaadin-tabsheet::part(loader)

Tabs

Root element

vaadin-tabs

Horizontal tabs

vaadin-tabs[orientation="horizontal"]

Vertical tabs

vaadin-tabs[orientation="vertical"]

Tab container

vaadin-tabs::part(tabs)

Back button

vaadin-tabs::part(back-button)

Back button icon

vaadin-tabs::part(back-button)::after

Forward button

vaadin-tabs::part(forward-button)

Forward button icon

vaadin-tabs::part(forward-button)::after

Tab

Root element

vaadin-tab

Selected

vaadin-tab[selected]

Focused

vaadin-tab[focused]

Keyboard focused

vaadin-tab[focus-ring]

Pressed

vaadin-tab[active]

Hovered

vaadin-tab:hover

Disabled

vaadin-tab[disabled]

Selection indicator

vaadin-tab::before

Icon in tab

vaadin-tab > vaadin-icon