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

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