TabGroup

shadow

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.