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.

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.

Demo

Tabs example with buttons to add and open tabs

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

Tabs example with counter

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

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>

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'];


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