Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

The tabs component allows the user to navigate between multiple tab children. It supports keyboard navigation and provides API methods to control the selected tab.
Slots
default — Renders the `IgcTabComponents` inside default slot.
CSS Parts
start-scroll-button — The start scroll button displayed when the tabs overflow.
end-scroll-button — The end scroll button displayed when the tabs overflow.
selected-indicator — The indicator that shows which tab is selected.

Properties

Section titled "Properties"

activation

Section titled "activation"

Determines the activation behavior of the tabs.

When set to 'auto', the tab will be selected when it receives focus. When set to 'manual', the tab will only be selected when it is clicked or activated with the keyboard.

 
activation: TabsActivation

alignment

Section titled "alignment"

Determines the alignment of the tabs header strip.

 
alignment: TabsAlignment

Accessors

Section titled "Accessors"

selected

Section titled "selected"

Returns the currently selected tab label or IDREF if no label property is set.

 
get selected(): string

Returns string

selectedTab

Section titled "selectedTab"

Returns the currently selected tab, if any.

 
get selectedTab(): IgrTabComponent | null

Returns IgrTabComponent | null

tabs

Section titled "tabs"

Returns the direct tab children of this element.

 
get tabs(): IgrTabComponent[]

Returns IgrTabComponent[]

Methods

Section titled "Methods"

select

Section titled "select"

Selects the tab matching the passed IDREF or label and displays the corresponding panel.

Disabled tabs and values not matching any tab are ignored.

 
select(idOrLabel: string): void

Parameters

  • idOrLabel: string

Returns void

Events

Section titled "Events"

onChange

Section titled "onChange"

Emitted when the selected tab changes.

 
onChange(args: CustomEvent<IgrTabComponent>): void

Parameters

Returns void