# 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 }}";

{{ tabs[2].disabled ? 'Enable' : 'Disable' }} third tab
Select "Profile" tab

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` or `bs-pane`. For data attributes, append the option name to `data-`, as in `data-animation=""`.

#### bs-tabs options

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

#### bs-pane options

Name | type | default | description
--- | --- | --- | ---
disabled | string | false | Disable pane
name | string | '' | Tab name. If provided, it will be used for `bsActivePane` instead of number

#### 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 | Info about current selected tab. If it has the name, it will be here, otherwise – 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.