<vaadin-tab>
`<vaadin-tab>` is a Web Component providing an accessible and customizable tab.
- Category
- Navigation
- Built with
Lit- Library
Vaadin
- Author
Vaadin
- Package
-
@vaadin/tabs - Component size
- 6.6 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
- 60,915/week · jsDelivr 2,874 hits/month (whole @vaadin/tabs package)
- Latest stable version
25.3.2- Last published
- Component last changed
- (in
25.3.0) - License
- Apache-2.0
<vaadin-tab> is a Web Component providing an accessible and customizable tab.
<vaadin-tab>Tab 1</vaadin-tab>
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
disabled |
Set when the element is disabled |
focused |
Set when the element is focused |
focus-ring |
Set when the element is keyboard focused |
selected |
Set when the tab is selected |
active |
Set when mousedown or enter/spacebar pressed |
orientation |
Set to horizontal or vertical depending on the direction of items |
has-tooltip |
Set when the tab has a slotted tooltip |
The following custom CSS properties are available for styling:
| Custom CSS property |
|---|
--vaadin-tab-background |
--vaadin-tab-border-color |
--vaadin-tab-border-radius |
--vaadin-tab-border-width |
--vaadin-tab-font-size |
--vaadin-tab-font-weight |
--vaadin-tab-gap |
--vaadin-tab-line-height |
--vaadin-tab-padding |
--vaadin-tab-text-color |
See Styling Components documentation.
Attributes
disabledselectedtheme