Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-tabsheet>

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

Category
Content
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/tabsheet
Component size
12.8 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
3 out of 5
Downloads
58,854/week · jsDelivr 2,217 hits/month (whole @vaadin/tabsheet package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.3.0)
License
Apache-2.0

<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.

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-tabsheet-border-color
--vaadin-tabsheet-border-radius
--vaadin-tabsheet-border-width
--vaadin-tabsheet-gap
--vaadin-tabsheet-padding

See Styling Components documentation.

Attributes

Events