Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxBottomNavComponent

Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.

Igx Module

IgxBottomNavModule

Igx Theme

igx-bottom-nav-theme

Igx Keywords

bottom navigation

Igx Group

Layouts

Remarks

The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom.

Example

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            Content 1
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    ...
</igx-bottom-nav>

Hierarchy

Hierarchy

  • IgxTabsDirective
    • IgxBottomNavComponent

Properties

Accessors

Properties

dir

dir: IgxDirectionality

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