feat(tabs): add support for other navigation types, like 'pills'

Author: bekos

src/tabs/docs/demo.html

@@ -21,7 +21,7 @@
 
   <hr />
 
-  <tabset vertical="true">
+  <tabset vertical="true" type="navType">
     <tab heading="Vertical 1">Vertical content 1</tab>
     <tab heading="Vertical 2">Vertical content 2</tab>
   </tabset>

src/tabs/docs/demo.js

@@ -9,4 +9,6 @@ var TabsDemoCtrl = function ($scope) {
       alert("You've selected the alert tab!");
     });
   };
+
+  $scope.navType = 'pills';
 };

src/tabs/docs/readme.md

@@ -8,6 +8,10 @@ AngularJS version of the tabs directive.
  	_(Defaults: false)_ :
  	Whether tabs appear vertically stacked.
 
+ * `type`
+ 	_(Defaults: 'tabs')_ :
+ 	Navigation type. Possible values are 'tabs' and 'pills'.
+
 #### `<tab>` ####
 
  * `heading` or `<tab-heading>`

src/tabs/tabs.js

@@ -46,6 +46,7 @@ function TabsetCtrl($scope, $element) {
     templateUrl: 'template/tabs/tabset.html',
     link: function(scope, element, attrs) {
       scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
+      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
     }
   };
 })

src/tabs/test/tabsSpec.js

@@ -460,4 +460,19 @@ describe('tabs', function() {
     });
   });
 
+  describe('type', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.navType = 'pills';
+
+      elm = $compile('<tabset type="navType"></tabset>')(scope);
+      scope.$apply();
+    }));
+
+    it('to show pills', function() {
+      expect(elm.find('ul')).toHaveClass('nav-pills');
+      expect(elm.find('ul')).not.toHaveClass('nav-tabs');
+    });
+  });
+
 });

template/tabs/tabset.html

@@ -1,6 +1,6 @@
 
 <div class="tabbable">
-  <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical}" ng-transclude>
+  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
   </ul>
   <div class="tab-content">
     <div class="tab-pane"