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.
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.

Constructors

Section titled "Constructors"

IgcTabsComponent 

new IgcTabsComponent(): IgcTabsComponent

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

Returns IgcTabsComponent

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 = 'auto'

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

alignment

Section titled "alignment"

Sets the alignment for the tab headers

 
alignment: TabsAlignment = 'start'

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

styles

Section titled "styles" 
styles: CSSResult[]

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

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:74

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:144

Returns string

tabs

Section titled "tabs"

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

 
get tabs(): IgcTabComponent[]

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

Returns IgcTabComponent[]

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin< IgcTabsComponentEventMap, Constructor<LitElement> >(LitElement) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

connectedCallback

Section titled "connectedCallback" 
connectedCallback(): void

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

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: EventEmitterMixin< IgcTabsComponentEventMap, Constructor<LitElement> >(LitElement) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin< IgcTabsComponentEventMap, Constructor<LitElement> >(LitElement) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

select

Section titled "select"

Selects the specified tab and displays the corresponding panel.

 
select(id: string): void

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

Parameters

  • id: string

Returns void

register

Section titled "register" 
register(): void

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

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<IgcTabComponent>

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