Tab Bar

The Ignite UI for Angular Tab Bar component enables the user to navigate between different content displayed in one view of three to five panels. Panels are identified with an icon and/or text across the bottom.

Tabbar Demo

Usage

<igx-tab-bar>
    <igx-tab-panel label="Tab 1">
        <h1>Tab 1 Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </igx-tab-panel>
    <igx-tab-panel label="Tab 2">
        <h1>Tab 2 Content</h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </igx-tab-panel>
    <igx-tab-panel label="Tab 3">
        <h1>Tab 3 Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae malesuada odio.</p>
    </igx-tab-panel>
</igx-tab-bar>

Igx-Tab-Bar represents a single content area with multiple panels, each associated with a tab. Igx-Tab-Bar provides two observable collections (QueryLists): one with panels and one with related tabs. The child components of the Igx-Tab-Bar are:

  • Igx-Tab-Panel - represents the wrapper of the content that needs to be displayed
  • Igx-Tab - button that triggers display of the associated panel

Each tab (Igx-Tab) is related to a particular panel (Igx-Tab-Panel). When tab is clicked, the associated panel is selected and visualized into a single container. There should always be a selected tab. Only one tab can be selected at a time.

Tab Bar Properties

  • tabs - Observable collection of all IgxTab view children
  • panels - Observable collection of all IgxTabPanel content children
  • selectedIndex - Gets the index of selected tab/panel in the respective collection. Default value: -1
  • selectedTab - Gets the selected IgxTab in the tabbar based on selectedIndex

Events

  • onTabSelected - Fired when new tab is selected
  • onTabDeselected - Fired when tab is deselected

Panel

Igx-Tab-Panel - Child component of Igx-Tab-Bar, that represents the container of the content need to be displayed.

Panel Properties

  • isSelected - Determines whether the panel is selected
  • isDisabled - Determines whether the panel is disabled
  • index - Gets the index of a panel in the panel collection
  • relatedTab - Gets the tab associated with the panel
  • label - Defines the label on the associated tab
  • icon - Defines the icon on the associated tab

Panel Methods

  • select - Selects the panel and the associated tab

Tab

Igx-Tab - Child component of Igx-Tab-Bar, which represents the button that triggers display of the associated panel.

Tab Properties

  • isDisabled - Determines whether the tab is disabled
  • isSelected - Determines whether the tab is selected
  • index - Gets the index of a tab in the tab collection
  • relatedPanel - Gets the panel associated with the tab

Tab Methods

  • select - Selects the tab and the associated panel