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