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

The <igc-tabs> component allows the user to navigate between multiple <igc-tab> elements. 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 tab activation. When set to auto, the tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys and the corresponding panel is displayed. When set to manual, the tab is only focused. The selection happens after pressing Space or Enter.

 
activation: TabsActivation

alignment

Section titled "alignment"

Sets the alignment for the tab headers

 
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

tabs

Section titled "tabs"

Returns the direct igc-tab elements that are children of this element.

get tabs(): IgrTabComponent[]

Returns IgrTabComponent[]

Methods

Section titled "Methods"

select

Section titled "select"

Selects the specified tab and displays the corresponding panel.

select(id: string): void

Parameters

  • id: 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