Tab scroll

Dependencies

The bb-tab-scroll directive causes the row of tabs to be horizontally scrollable when the width of the tabs exceeds the width of its container. The tabs are also animated to indicate to the user that they can be scrolled.

Tab scroll settings

  • bb-tab-scroll-ready — Used to indicate the tabs are ready to be animated. This should be used when the tabs are loaded dynamically based on some asynchronous logic like loading data from a web server.

Demo

Tab 1 Content 1 Tab with count 2 Content 2 Content 3 Content 4 Content 5 Content 6 Content 7

Markup

<div ng-controller="TabscrollTestController as tabscrollCtrl">
  <uib-tabset bb-tab-scroll bb-tab-scroll-ready="tabscrollCtrl.ready">
    <uib-tab>
        <uib-tab-heading>
            Tab 1
        </uib-tab-heading>
        Content 1
    </uib-tab>
    <uib-tab>
      <uib-tab-heading>
        Tab with count
        <span class="bb-tab-header-count">2</span>
    </uib-tab-heading>
      Content 2
  </uib-tab>
    <uib-tab heading="Tab 3">
      Content 3
  </uib-tab>
    <uib-tab class="bb-tab-spacer"></uib-tab>
    <uib-tab heading="Tab 4">
      Content 4
  </uib-tab>
    <uib-tab heading="Tab 5">
      Content 5
  </uib-tab>
    <uib-tab heading="Tab 6">
      Content 6
  </uib-tab>
    <uib-tab heading="Tab 7">
      Content 7
  </uib-tab>
  </uib-tabset>
  <br />
  <button class="btn btn-primary" ng-click="tabscrollCtrl.replay()">Replay animation</button>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';
    function TabscrollTestController($timeout) {
        var self = this;
        self.replay = function () {
            self.ready = false;
            $timeout(function () {
                self.ready = true;
            }, 200);
        };

        $timeout(function () {
            self.ready = true;
        }, 2000);
    }

    TabscrollTestController.$inject = ['$timeout'];

    angular.module('stache').controller('TabscrollTestController', TabscrollTestController);

}());