Tabs component is used to organize or switch between similar data sets.
Igx Module
IgxTabsModule
Igx Theme
igx-tabs-theme
Igx Keywords
tabs
Igx Group
Layouts

Remarks

[object Object]

Example

<igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <igx-icon igxTabHeaderIcon>folder</igx-icon>
            <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
            Content 1
        </igx-tab-content>
    </igx-tab-item>
    ...
</igx-tabs>

Constructors

Section titled "Constructors"

IgxTabsComponent 

new IgxTabsComponent(): IgxTabsComponent

Returns IgxTabsComponent

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. Defaults is auto.

 
activation: "manual" | "auto" = 'auto'

Defined in projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:94

disableAnimation

Section titled "disableAnimation"

Inherited from: IgxTabsDirective

Enables/disables the transition animation of the contents.

 
disableAnimation: boolean = false

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:66

items

Section titled "items"

Inherited from: IgxTabsDirective

Returns the items.

 
items: QueryList<IgxTabItemDirective>

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:90

selectedIndexChange

Section titled "selectedIndexChange"

Inherited from: IgxTabsDirective

Output to enable support for two-way binding on [(selectedIndex)]

 
selectedIndexChange: EventEmitter<number>

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:72

selectedIndexChanging

Section titled "selectedIndexChanging"

Inherited from: IgxTabsDirective

Emitted when the selected index is about to change.

 
selectedIndexChanging: EventEmitter<ITabsSelectedIndexChangingEventArgs>

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:78

selectedItemChange

Section titled "selectedItemChange"

Inherited from: IgxTabsDirective

Emitted when the selected item is changed.

 
selectedItemChange: EventEmitter<ITabsSelectedItemChangeEventArgs>

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:84

Accessors

Section titled "Accessors"

selectedIndex

Section titled "selectedIndex"

Inherited from: IgxTabsDirective

Gets/Sets the index of the selected item. Default value is 0 if contents are defined otherwise defaults to -1.

 
get selectedIndex(): number

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:36

Returns number 

set selectedIndex(value: number): void

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:40

Parameters

  • value: number

Returns void

selectedItem

Section titled "selectedItem"

Inherited from: IgxTabsDirective

Gets the selected item.

 
get selectedItem(): IgxTabItemDirective

Defined in projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts:95

Returns IgxTabItemDirective

tabAlignment

Section titled "tabAlignment"

Gets/Sets the tab alignment. Defaults to start.

 
get tabAlignment(): string

Defined in projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:75

Returns string 

set tabAlignment(value: string): void

Defined in projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.ts:79

Parameters

  • value: string

Returns void