<div class="bs-docs-section" ng-controller="TabDemoCtrl">

<div class="page-header">

<h1 id="tabs">Tabs <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/tab/tab.js" target="_blank">tab.js</a>

</h1>

<code>mgcrea.ngStrap.tab</code>

</div>

<h2 id="tabs-examples">Examples</h2>

<p>Add quick, dynamic tab functionality to transition through panes of local content.</p>

<h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="tab/docs/tab.demo.html" data-content-js-url="tab/docs/tab.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>

<pre class="bs-example-scope">$scope.tabs = {{tabs | json}};

$scope.tabs.activeTab = "{{ tabs.activeTab }}";

</pre>

<div class="bs-example" append-source>

<div class="btn btn-default" ng-click="toggleThirdTab()">

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

</div>

<div class="btn btn-default" ng-click="tabs.activeTab='Profile'">

Select "Profile" tab

</div>

<hr />

<!-- bsActivePane is optional -->

<div bs-active-pane="tabs.activeTab" bs-tabs>

<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>

</div>

</div>

</div>

<div class="bs-example" style="padding-bottom: 24px;" append-source>

<!-- control a tab with bsActivePane binding -->

<div class="btn-group" ng-model="tabs.activeTab" bs-radio-group>

<label class="btn btn-default" ng-repeat="tab in tabs">

<input type="radio" class="btn btn-default" value="{{ $index }}">Tab n°{{ $index + 1 }}

</label>

</div>

<div class="btn btn-default" ng-click="pushTab()">Add new tab</div>

</div>

<h2 id="tabs-usage">Usage</h2>

<p>Append a <code>bs-tabs</code> attribute to any element and several children <code>bs-pane</code> attributes to children elements to enable the directive.</p>

<div class="callout callout-warning">

<h4>ngModel binding</h4>

<p>Using <code>ngModel</code> 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 <code>form</code> element.</p>

<p>Please use the helper attribute <code>bsActivePane</code> instead.</p>

</div>

<div class="callout callout-info row">

<h4>Custom animations</h4>

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

<p>Here is a sample definition for the default <code>am-fade</code> animation class:</p>

<div class="col-md-5">

<p>LESS:</p>

<pre class="bs-exemple-code">

<code class="css" highlight-block>

.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;

}

}

</code>

</pre>

</div>

<div class="col-md-5 col-md-offset-1">

<p>CSS:</p>

<pre class="bs-exemple-code">

<code class="css" highlight-block>

.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;

}

</code>

</pre>

</div>

</div>

<h3>Options</h3>

<p>Options can be passed via data attributes or as an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object on

<code>bs-tabs</code> or <code>bs-pane</code>. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>

<div class="table-responsive">

<h4>bs-tabs options</h4>

<table class="table table-bordered table-striped">

<thead>

<tr>

<th style="width: 100px;">Name</th>

<th style="width: 100px;">type</th>

<th style="width: 50px;">default</th>

<th>description</th>

</tr>

</thead>

<tbody>

<tr>

<td>animation</td>

<td>string</td>

<td>am-fade</td>

<td>Apply a CSS animation to tab panes with <code>ngAnimate</code></td>

</tr>

<tr>

<td>template</td>

<td>path</td>

<td>false</td>

<td>

<p>If a remote URL is provided, overrides the default template</p>

</td>

</tr>

<tr>

<td>navClass</td>

<td>string</td>

<td>nav-tabs</td>

<td>

<p>Classes to be applied to the tab navigation (bootstrap supports <code>nav-pills</code>, <code>nav-stacked</code>)</p>

</td>

</tr>

<tr>

<td>activeClass</td>

<td>string</td>

<td>active</td>

<td>

<p>Class to be applied to the animated element</p>

</td>

</tr>

</tbody>

</table>

<h4>bs-pane options</h4>

<table class="table table-bordered table-striped">

<thead>

<tr>

<th style="width: 100px;">Name</th>

<th style="width: 100px;">type</th>

<th style="width: 50px;">default</th>

<th>description</th>

</tr>

</thead>

<tbody>

<tr>

<td>disabled</td>

<td>string</td>

<td>false</td>

<td>

<p>Disable pane</p>

</td>

</tr>

<tr>

<td>name</td>

<td>string</td>

<td>''</td>

<td>

<p>Tab name. If provided, it will be used for `bsActivePane` instead of number</p>

</td>

</tr>

</tbody>

</table>

</div>

<div class="callout callout-info">

<h4>Default options</h4>

<p>You can override global defaults for the plugin with <code>$tabProvider.defaults</code></p>

<div class="highlight">

<pre class="bs-exemple-code">

<code class="javascript" highlight-block>

angular.module('myApp')

.config(function($tabProvider) {

angular.extend($tabProvider.defaults, {

animation: 'am-flip-x'

});

})

</code>

</pre>

</div>

</div>

<h3>Helper attributes</h3>

<p>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 <code>data-</code>, as in <code>data-bs-active-pane="tabs.activeTab"</code>.</p>

<div class="table-responsive">

<table class="table table-bordered table-striped">

<thead>

<tr>

<th style="width: 100px;">Name</th>

<th style="width: 100px;">type</th>

<th>description</th>

</tr>

</thead>

<tbody>

<tr>

<td>bsActivePane</td>

<td>number</td>

<td>

<p>Info about current selected tab. If it has the name, it will be here, otherwise – active tab pane index (zero based).</p>

<p>You can use it to set the active tab pane from code or to get the currently active tab pane.</p>

</td>

</tr>

</tbody>

</table>

</div>