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

dir: IgxDirectionality
disableAnimation: boolean = false

Enables/disables the transition animation of the contents.

items: QueryList<IgxTabItemDirective>

Returns the items.

selectedIndexChange: EventEmitter<number> = ...

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

selectedIndexChanging: EventEmitter<ITabsSelectedIndexChangingEventArgs> = ...

Emitted when the selected index is about to change.

selectedItemChange: EventEmitter<ITabsSelectedItemChangeEventArgs> = ...

Emitted when the selected item is changed.

Accessors