TabGroup
TabGroup displays a tab-based navigation that allows users to switch between and view different parts of the application's content without having to navigate to another page. It consists of individual tabs Tab and Panels, which when clicked display the contents of the tab.
The TabGroup element supports multiple appearance variants using the variant attribute.
Basic usage
The Card element has been used only for the purpose of this demonstration.
Variants of tab placement
By adding the variant property it is possible to change the location of the tabs. Supported values are start, end and bottom.
Start
End
Bottom
Attributes and Properties
Option
| Description | Defines a variant of the TabGroup layout. Possible values include start, end and bottom. |
| Attribute | Option |
| Type | string |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wj-font-size | Specifies the font size. |
--wj-tab-color-active | Specifies the background color of the active tab element. |
--wj-tab-color-hover | Determines the background color of the tab element when the mouse is pointed to it. |
--wj-tab-font-weight | Sets the font weight. |
--wj-tab-letter-spacing | Sets the distance between letters. |
--wj-tab-padding-bottom | Specifies the bottom tab offset. |
--wj-tab-padding-inline | Specifies the horizontal offset of the tab. |
--wj-tab-padding-top | Specifies the top tab offset. |
--wj-tab-text-transfrom | Sets the transformation of the text in the tab. |
Slots
| Name | Description |
|---|---|
No | The content is placed in the nav element. |