Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxTabsComponent

Tabs component is used to organize or switch between similar data sets.

igxmodule

IgxTabsModule

igxtheme

igx-tabs-theme

igxkeywords

tabs

igxgroup

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

Implements

  • AfterViewInit
  • OnDestroy

Index

Constructors

Properties

Accessors

Constructors

constructor

  • new IgxTabsComponent(builder: AnimationBuilder, cdr: ChangeDetectorRef, ngZone: NgZone): IgxTabsComponent

Properties

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

disableAnimation

  • get disableAnimation(): boolean
  • set disableAnimation(value: boolean): void

selectedIndex

  • get selectedIndex(): number
  • set selectedIndex(value: number): void

selectedItem

tabAlignment

  • get tabAlignment(): string
  • set tabAlignment(value: string): void