feat(tabs): add nav-justified

adds functionality for justifed tabs http://getbootstrap.com/components/#nav-justified
angular-ui · Dec 28, 2013 · 3199dd8 · 3199dd8
1 parent c141dac
commit 3199dd8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
@@ -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>
diff --git 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
@@ -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>
  */
@@ -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
@@ -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();

diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html
@@ -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"