The Tab Panel component is presentational and only renders markup related to the tabs themselves (that is, tab panel content areas are managed and rendered separately). Being a presentational component, tabs hold no state and therefore rely on parent controllers to provide statefulness.

TabPanelBindings = {
    tabs: '<',
    onChanges: '&?',
    onTabSelected: '&',
    bottomHighlight: '<',
    topHighlight: '<',
    centerTabs: '<?',
    isOpen: '<?',
    hideSingleTab: '<?'
};

Several of the bindings related only to style: bottomHighlight (default), topHighlight, centerTabs, isOpen (only for responsive panel), and hideSingleTab (Tab Cards). onChanges and onTabSelected provide callback actions to the parent controller. tabs is the array of tabs to be displayed:

[{
    name : 'Summary',
    active : true,
    notificationCount: 2
},
{
    name : 'Comments',
    active : false,
    notificationCount: 4
},
{
    name : 'Emphasized',
    active : false,
    hasEmphasis: true,
    notificationCount: 4
},
{
    name: 'Has Error',
    hasError: true
}];

name and notificationCount will be rendered as part of the tab. active indicates state. hasEmphasis changes the color of the notification count badge. hasError shows a small error icon to indicate the tab content may be invalid.

No default styles are provided for the tab content area. This depends on context and should be informed by placement and size (cards vs. side panels, etc.).

Tab Panel

The tab panel displays a collection of tabs for selection.

HTML

<div class="t-content" style="width:450px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="tabs" on-tab-selected="tabSelected"></inv-tab-panel>
    <div ng-show="tabs[0].active" style="text-align:center">Summary Contents</div>
    <div ng-show="tabs[1].active" style="text-align:center">Comments Contents</div>
</div>

Tab without fixed width

By default tabs have a fixed width. To accomodate tab with long title, this restriction can be removed with "tabWidthAuto" property set to true.

HTML

<div class="t-content" style="width:450px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="tabsAutoWidth" on-tab-selected="tabSelected" tab-width-auto="true"></inv-tab-panel>
</div>

Large Panel

The tab panel will fill the width, while the tabs will stay aligned.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="tabs" on-tab-selected="tabSelected"></inv-tab-panel>
    <div ng-show="tabs[0].active" style="text-align:center">Summary Contents</div>
    <div ng-show="tabs[1].active" style="text-align:center">Comments Contents</div>
</div>

More Tabs Panel Example

The tab panel displays a collection of tabs for selection.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="moreTabs" on-tab-selected="tabSelected2"></inv-tab-panel>
</div>

Centered Tabs

Centering the tabs in the display.

HTML

<div class="t-content" style="width:1000px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="tabs" on-tab-selected="tabSelected" center-tabs="true"></inv-tab-panel>
    <div ng-show="tabs[0].active" style="text-align:center">Summary Contents</div>
    <div ng-show="tabs[1].active" style="text-align:center">Comments Contents</div>
</div>

Top Highlight

Highlighting of active tab is displayed on the top of the tab instead of the bottom

HTML

<div class="t-content" style="width:450px; height: 100px;" ng-controller="tabPanelExampleController">
    <inv-tab-panel tabs="topHighlightTabs" on-tab-selected="tabSelectedTop" bottom-highlight="false"></inv-tab-panel>
    <div ng-show="tabs[0].active" style="text-align:center">Summary Contents</div>
    <div ng-show="tabs[1].active" style="text-align:center">Comments Contents</div>
</div>

Hide Single Tab

Optionally hide the tab panel if only one tab would be visible. The tab content area is unaffected. Only used with Tab Cards

HTML

<div class="t-content" style="width:450px; height: 100px;" ng-controller="tabPanelExampleController">
    <div ng-show="tabs[0].active" style="text-align:center">Summary Contents</div>
    <div ng-show="tabs[1].active" style="text-align:center">Comments Contents</div>
    <inv-tab-panel tabs="singleTab" on-tab-selected="tabSelected" hide-single-tab="true"></inv-tab-panel>
</div>

Responsive Panel

Context-specific tab panel that will shift layout at small screen sizes and optionally overlay other content

HTML

<div>
    See the <a href="/styleguide/showcase/dashboard/index.html">Dashboard Showcase</a> for and example and implementation details.
</div>