Tabs tab.js

mgcrea.ngStrap.tab

Examples

Add quick, dynamic tab functionality to transition through panes of local content.

Live demo clog.info

$scope.tabs = {{tabs | json}};
$scope.tabs.activeTab = {{ tabs.activeTab }};

Tab n°{{ $index + 1 }}

Add new tab

Usage

Append a bs-tabs attribute to any element and several children bs-pane attributes to children elements to enable the directive.

ngModel binding

Using ngModel to bind to the active tab pane index is deprecated and may be removed in future versions, due to issues with validation when using the Tabs directive inside a form element.

Please use the helper attribute bsActivePane instead.

Custom animations

Pane animation is done with the active class and requires custom CSS. You can change the default am-fade animation class by including the animation option.

Here is a sample definition for the default am-fade animation class:

LESS:

        
.tab-pane.am-fade {
  animation-duration: .3s;
  animation-timing-function: ease;
  animation-fill-mode: backwards;
  opacity: 1;

  &.active-remove {
    display: none !important;
  }
  &.active-add {
    animation-name: fadeIn;
  }
}

CSS:

        
.tab-pane.am-fade {
  animation-duration: .3s;
  animation-timing-function: ease;
  animation-fill-mode: backwards;
  opacity: 1;
}

.tab-pane.am-fade.active-remove {
  display: none !important;
}

.tab-pane.am-fade.active-add {
  animation-name: fadeIn;
}

Options

Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on bs-tabs. For data attributes, append the option name to data-, as in data-animation="".

Name	type	default	description
animation	string	am-fade	apply a CSS animation to tab panes with `ngAnimate`
template	path	false	If a remote URL is provided, overrides the default template
navClass	string	nav-tabs	Classes to be applied to the tab navigation (bootstrap supports `nav-pills`, `nav-stacked`)
activeClass	string	active	Class to be applied to the animated element

Default options

You can override global defaults for the plugin with $tabProvider.defaults

        
          angular.module('myApp')
          .config(function($tabProvider) {
            angular.extend($tabProvider.defaults, {
              animation: 'am-flip-x'
            });
          })

Helper attributes

Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to data-, as in data-bs-active-pane="tabs.activeTab".

Name	type	description
bsActivePane	number	Binds to the active tab pane index (zero based). You can use it to set the active tab pane from code or to get the currently active tab pane.