Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxTabsComponent

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

The Ignite UI for Angular Tabs component places tabs at the top and allows for scrolling when there are multiple tab items on the screen.

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>

Hierarchy

Hierarchy

  • IgxTabsDirective
    • IgxTabsComponent

Implements

  • AfterViewInit
  • OnDestroy

Constructors

Properties

Accessors

Constructors

constructor

Properties

activation

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

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.

dir

dir: IgxDirectionality

disableAnimation

disableAnimation: boolean = false

Enables/disables the transition animation of the contents.

items

items: QueryList<IgxTabItemDirective>

Returns the items.

selectedIndexChange

selectedIndexChange: EventEmitter<number> = ...

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

selectedIndexChanging

selectedIndexChanging: EventEmitter<ITabsSelectedIndexChangingEventArgs> = ...

Emitted when the selected index is about to change.

selectedItemChange

selectedItemChange: EventEmitter<ITabsSelectedItemChangeEventArgs> = ...

Emitted when the selected item is changed.

Accessors

selectedIndex

selectedItem

tabAlignment