Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

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

}());