Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tabs): add nav-justified
Browse files Browse the repository at this point in the history
adds functionality for justifed tabs
http://getbootstrap.com/components/#nav-justified
  • Loading branch information
WilliamRandol authored and pkozlowski-opensource committed Dec 28, 2013
1 parent c141dac commit 3199dd8
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 4 deletions.
8 changes: 8 additions & 0 deletions src/tabs/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,12 @@
<tab heading="Vertical 1">Vertical content 1</tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>

<hr />

<tabset justified="true">
<tab heading="Justified">Justified content</tab>
<tab heading="SJ">Short Labeled Justified content</tab>
<tab heading="Long Justified">Long Labeled Justified content</tab>
</tabset>
</div>
4 changes: 4 additions & 0 deletions src/tabs/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'.
Expand Down
10 changes: 8 additions & 2 deletions src/tabs/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
<example module="ui.bootstrap">
<file name="index.html">
<tabset>
<tab heading="Vertical Tab 1"><b>First</b> Content!</tab>
<tab heading="Vertical Tab 2"><i>Second</i> Content!</tab>
<tab heading="Tab 1"><b>First</b> Content!</tab>
<tab heading="Tab 2"><i>Second</i> Content!</tab>
</tabset>
<hr />
<tabset vertical="true">
<tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab>
<tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab>
</tabset>
<tabset justified="true">
<tab heading="Justified Tab 1"><b>First</b> Justified Content!</tab>
<tab heading="Justified Tab 2"><i>Second</i> Justified Content!</tab>
</tabset>
</file>
</example>
*/
Expand All @@ -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';
}
};
Expand Down
13 changes: 13 additions & 0 deletions src/tabs/test/tabs.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -546,6 +546,19 @@ describe('tabs', function() {
});
});

describe('justified', function() {
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
scope.justified = true;
elm = $compile('<tabset justified="justified"></tabset>')(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();
Expand Down
3 changes: 1 addition & 2 deletions template/tabs/tabset.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

<div class="tabbable">
<ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
</ul>
<ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
<div class="tab-content">
<div class="tab-pane"
ng-repeat="tab in tabs"
Expand Down

0 comments on commit 3199dd8

Please sign in to comment.