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.
Element
igc-tabs
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 = 'auto'

Defined in src/components/tabs/tabs.ts:139

alignment

Section titled "alignment"

Determines the alignment of the tabs header strip.

 
alignment: TabsAlignment = 'start'

Defined in src/components/tabs/tabs.ts:127

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-tabs" = 'igc-tabs'

Defined in src/components/tabs/tabs.ts:75

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

Defined in src/components/tabs/tabs.ts:148

Returns string

selectedTab

Section titled "selectedTab"

Returns the currently selected tab, if any.

 
get selectedTab(): IgcTabComponent | null

Defined in src/components/tabs/tabs.ts:158

Returns IgcTabComponent | null

tabs

Section titled "tabs"

Returns the direct tab children of this element.

 
get tabs(): IgcTabComponent[]

Defined in src/components/tabs/tabs.ts:143

Returns IgcTabComponent[]

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

Defined in src/components/tabs/tabs.ts:426

Parameters

  • idOrLabel: string

Returns void