diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html index 40dda435bd..818e316140 100644 --- a/src/tabs/docs/demo.html +++ b/src/tabs/docs/demo.html @@ -25,4 +25,12 @@ Vertical content 1 Vertical content 2 + +
+ + + Justified content + Short Labeled Justified content + Long Labeled Justified content + diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md index 75f5c60fdb..daee59f2fd 100644 --- a/src/tabs/docs/readme.md +++ b/src/tabs/docs/readme.md @@ -8,6 +8,10 @@ AngularJS version of the tabs directive. _(Defaults: false)_ : Whether tabs appear vertically stacked. + * `justified` + _(Defaults: false)_ : + Whether tabs fill the container and have a consistent width. + * `type` _(Defaults: 'tabs')_ : Navigation type. Possible values are 'tabs' and 'pills'. diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index ce5d1b9923..0a368a2fb6 100644 --- a/src/tabs/tabs.js +++ b/src/tabs/tabs.js @@ -48,19 +48,24 @@ angular.module('ui.bootstrap.tabs', []) * Tabset is the outer container for the tabs directive * * @param {boolean=} vertical Whether or not to use vertical styling for the tabs. + * @param {boolean=} justified Whether or not to use justified styling for the tabs. * * @example - First Content! - Second Content! + First Content! + Second Content!
First Vertical Content! Second Vertical Content! + + First Justified Content! + Second Justified Content! +
*/ @@ -74,6 +79,7 @@ angular.module('ui.bootstrap.tabs', []) templateUrl: 'template/tabs/tabset.html', link: function(scope, element, attrs) { scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false; + scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false; scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs'; } }; diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js index 2ead88c5cf..72f4c3613f 100644 --- a/src/tabs/test/tabs.spec.js +++ b/src/tabs/test/tabs.spec.js @@ -546,6 +546,19 @@ describe('tabs', function() { }); }); + describe('justified', function() { + beforeEach(inject(function($compile, $rootScope) { + scope = $rootScope.$new(); + scope.justified = true; + elm = $compile('')(scope); + scope.$apply(); + })); + + it('to justify tabs', function() { + expect(elm.find('ul.nav-tabs')).toHaveClass('nav-justified'); + }); + }); + describe('type', function() { beforeEach(inject(function($compile, $rootScope) { scope = $rootScope.$new(); diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html index ffe289f882..66a529658c 100644 --- a/template/tabs/tabset.html +++ b/template/tabs/tabset.html @@ -1,7 +1,6 @@
- +