Tabset

The tabset module contains directives to enhance the Angular UI Bootstrap tabs directive. These enhancements include options to display buttons in the tab area, to make tabs collapsible, and to make tabs closeable.

Tabset settings

The tabset module includes the following attributes to enhance uib-tabset.

  • bb-tabset-add(Optional.) Creates an add button in the tab area and takes a callback that will be executed when users click the button.
  • bb-tabset-open(Optional.) Creates an open button in the tab area and takes a callback that will be executed when users click the button.
  • bb-tabset-collapsible(Optional.) Collapses tabs into a dropdown on small screens such as mobile devices. You include this attribute with no value in the uib-tabset element, and then you apply the bb-tab-collapse-header attribute to the uib-tab element to specify a title for the dropdown to display when that tab is active. NOTE: Not compatible with bb-vertical-tabset.
  • bb-vertical-tabset(Optional.) Converts the tabset into stacked vertical tabs on the left-hand side of a container. NOTE: Not compatible with bb-tab-collapsible.
  • bb-vertical-tabset-close-others(Optional.) If bb-vertical-tabset is used with bb-vertical-tabset-group, this takes a boolean value indicating whether to close other collapsible groups when one is expanded.

Vertical tabset group settings

The tabset module includes the following attributes to enhance direct children of the bb-vertical-tabset directive.

  • bb-vertical-tabset-group(Optional.) Creates a collpsible group of child uib-tab elements.
  • bb-vertical-tabset-group-heading(Optional.) Specifies the text to use in the heading of the collapsible group of tabs.
  • bb-vertical-tabset-group-is-disabled(Optional.) Boolean value that can be set to disabled expanding and collapsing a collapsible group.
  • bb-vertical-tabset-group-is-open(Optional.) Boolean value indicating if the collapsible group is open.

Tab settings

The tabset module includes the following attributes to enhance uib-tab.

  • bb-tab-heading-xs(Optional.) Specifies a tab heading to display on small screen sizes.
  • bb-tab-collapse-header — When bb-tabset-collapsible makes a tab collapsible, specifies a title for the dropdown to display when that tab is active.
  • bb-tab-close(Optional.) Makes a tab closeable. To display the close icon on a tab, you also add a button element within the uib-tab-heading element and apply the bb-tab-close-icon class to it.

Tab heading settings

The tabset module includes the following classes to enhance uib-tab-heading.

  • bb-tab-close-icon — When bb-tab-close makes a tab closeable, displays a close icon on the tab.
  • bb-tab-header-count(Optional.) Displays a counter alongside the tab header.

Vertical tabset events

Vertical tabsets will listen for the following events.

  • reinitializeVerticalTabsetDisplay — Causes the vertical tabset to revert to its initial display state.

Demo

Tabs example with buttons to add and open tabs

{{t.title}} {{t.content}}

Tabs example with counter

{{p.title}} {{p.count}} {{p.content}}

Vertical tabset

Group 1, tab 1 content

Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}

Group 1, tab 2 content

Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}

Group 2, tab 1 content

Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}

Group 2, tab 2 content

Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}

Group 3, tab 1 contents

Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}

Markup

<div ng-controller="TabsetTestController as tabsetTestCtrl">
  <h3>Tabs example with buttons to add and open tabs</h3>
    <uib-tabset bb-tabset-add="tabsetTestCtrl.addTab()" bb-tabset-open="tabsetTestCtrl.openTab()" bb-tabset-collapsible>
      <uib-tab bb-tab-collapse-header="t.title" ng-repeat="t in tabsetTestCtrl.tabs" class="bb-tab-close">
         <uib-tab-heading>
           {{t.title}}
            <button type="button" aria-label="Close tab" class="bb-tab-close-icon" ng-click="tabsetTestCtrl.closeTab($index, $event)"></button>
         </uib-tab-heading>
         {{t.content}}
      </uib-tab>
    </uib-tabset>
</div>

<div ng-controller="TabsetPageController as tabsetPageCtrl">
  <h3>Tabs example with counter</h3>
    <uib-tabset bb-tabset-collapsible>
        <uib-tab bb-tab-collapse-header="p.title" ng-repeat="p in tabsetPageCtrl.pages">
            <uib-tab-heading>
                {{p.title}}
                <span class="bb-tab-header-count">{{p.count}}</span>
            </uib-tab-heading>
            {{p.content}}
        </uib-tab>
    </uib-tabset>
</div>

<script type="text/ng-template" id="demo/tabset/checklist.html">
    <bb-modal>
        <bb-modal-header>Select Tabs</bb-modal-header>
        <div bb-modal-body>
            <bb-checklist
                bb-checklist-items="checkCtrl.availableTabs"
                bb-checklist-selected-items="checkCtrl.selectedTabs"
                bb-checklist-mode="list"
                >
            </bb-checklist>
        </div>
        <bb-modal-footer>
            <bb-modal-footer-button-primary ng-click="checkCtrl.applyChanges()">Apply tabs</bb-modal-footer-button-primary>
            <bb-modal-footer-button-cancel></bb-modal-footer-button-cancel>
        </bb-modal-footer>
    </bb-modal>
</script>

<div ng-controller="VerticalTabsetDemoController as verticalTabsetDemoCtrl">
  <h3>Vertical tabset</h3>
    <uib-tabset bb-vertical-tabset>
      <div bb-vertical-tabset-group bb-vertical-tabset-group-heading="Group 1" bb-vertical-tabset-group-is-open="verticalTabsetDemoCtrl.isOpen">
        <uib-tab heading="Group 1 - Tab 1">
          <p>Group 1, tab 1 content</p>
          <p>Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}</p>
          <button class="btn btn-primary visible-xs-block" ng-click="verticalTabsetDemoCtrl.showTabs()">
            <i class="fa fa-chevron-left"></i>&nbsp;Tab list
          </button>
        </uib-tab>
        <uib-tab heading="Group 1 - Tab 2">
          <p>Group 1, tab 2 content</p>
          <p>Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}</p>
          <button class="btn btn-primary visible-xs-block" ng-click="verticalTabsetDemoCtrl.showTabs()">
            <i class="fa fa-chevron-left"></i>&nbsp;Tab list
          </button>
        </uib-tab>
      </div>
      <div bb-vertical-tabset-group bb-vertical-tabset-group-heading="Group 2">
        <uib-tab heading="Group 2 - Tab 1">
          <p>Group 2, tab 1 content</p>
          <p>Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}</p>
          <button class="btn btn-primary visible-xs-block" ng-click="verticalTabsetDemoCtrl.showTabs()">
            <i class="fa fa-chevron-left"></i>&nbsp;Tab list
          </button>
        </uib-tab>
        <uib-tab heading="Group 2 - Tab 2">
          <p>Group 2, tab 2 content</p>
          <p>Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}</p>
          <button class="btn btn-primary visible-xs-block" ng-click="verticalTabsetDemoCtrl.showTabs()">
            <i class="fa fa-chevron-left"></i>&nbsp;Tab list
          </button>
        </uib-tab>
      </div>
      <div bb-vertical-tabset-group bb-vertical-tabset-group-is-disabled="true" bb-vertical-tabset-group-heading="Disabled group">
        <uib-tab heading="Group 3 - Tab 1">
          <p>Group 3, tab 1 contents</p>
          <p>Group 1 is open: {{!!verticalTabsetDemoCtrl.isOpen}}</p>
          <button class="btn btn-primary visible-xs-block" ng-click="verticalTabsetDemoCtrl.showTabs()">
            <i class="fa fa-chevron-left"></i>&nbsp;Tab list
          </button>
        </uib-tab>
      </div>
    </uib-tabset>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function TabsetTestController(bbModal) {
        var self = this,
            tabCount = 4;

        self.tabs = [
            {
                title: 'Tab 1',
                content: 'Placeholder content for Tab 1'
            },
            {
                title: 'Tab 2',
                content: 'Placeholder content for Tab 2'
            },
            {
                title: 'Tab 3',
                content: 'Placeholder content for Tab 3'
            }
        ];

        self.closeTab = function (index, event) {
            event.preventDefault();
            self.tabs.splice(index, 1);
        };

        self.addTab = function () {
            var newTitle = 'Tab ' + tabCount.toString(),
                newContent = 'Placeholder content for Tab ' + tabCount.toString();
            self.tabs.push({
                title: newTitle,
                content: newContent
            });
            tabCount++;
        };
        self.openTab = function () {
            bbModal.open({
                controller: 'CheckModalController as checkCtrl',
                templateUrl: 'demo/tabset/checklist.html',
                resolve: {
                    currentTabs: function () {
                        return angular.copy(self.tabs);
                    }
                }
            }).result.then(function (selectedTabs) {
                self.tabs = selectedTabs;
            });
        };
    }

    function CheckModalController($scope, currentTabs) {
        var self = this;

        self.availableTabs = [
            {
                title: 'Opened tab 1',
                description: 'The first tab that the modal can open',
                content: 'Placeholder content for Opened tab 1'
            },
            {
                title: 'Opened tab 2',
                description: 'The second tab that the modal can open',
                content: 'Placeholder content for Opened tab 2'
            },
            {
                title: 'Opened tab 3',
                description: 'The third tab that the modal can open',
                content: 'Placeholder content for Opened tab 3'
            }
        ];

        if (!currentTabs) {
            self.selectedTabs = [];
        } else {
            self.selectedTabs = currentTabs;
        }

        self.applyChanges = function () {
            $scope.$close(self.selectedTabs);
        };
    }

    function TabsetPageController() {
        var self = this;
        self.pages = [
            {
                title: "Records",
                count: 10,
                content: "Placeholder content for a tab that displays 10 records."
            },
            {
                title: "Gifts",
                count: 14,
                content: "Placeholder content for a tab that displays 14 gifts."
            },
                            {
                title: "Users",
                count: 144,
                content: "Placeholder content for a tab that displays 144 users."
            }

        ]
    }

    CheckModalController.$inject = ['$scope', 'currentTabs'];

    TabsetTestController.$inject = ['bbModal'];

    function VerticalTabsetDemoController($scope) {
        var self = this;

        self.showTabs = showTabs;

        function showTabs() {
            $scope.$broadcast('reinitializeVerticalTabsetDisplay');
        }
    }

    VerticalTabsetDemoController.$inject = ['$scope'];

    angular.module('stache')
        .controller('CheckModalController', CheckModalController)
        .controller('TabsetTestController', TabsetTestController)
        .controller('TabsetPageController', TabsetPageController)
        .controller('VerticalTabsetDemoController', VerticalTabsetDemoController);
}());