feat(tabs): add support for vertical option

Author: bekos

src/tabs/docs/demo.html

@@ -18,4 +18,11 @@
       I've got an HTML heading, and a select callback. Pretty cool!
     </tab>
   </tabset>
+
+  <hr />
+
+  <tabset vertical="true">
+    <tab heading="Vertical 1">Vertical content 1</tab>
+    <tab heading="Vertical 2">Vertical content 2</tab>
+  </tabset>
 </div>

src/tabs/docs/readme.md

@@ -1,5 +1,27 @@
 AngularJS version of the tabs directive.
 
-Allows a `select` callback attribute, `active` binding attribute and `disabled` binding attribute.
+### Settings ###
 
-Allows either `heading` text-heading as an attribute, or a `<tab-heading>` element inside as the heading.
+#### `<tabset>` ####
+
+ * `vertical`
+ 	_(Defaults: false)_ :
+ 	Whether tabs appear vertically stacked.
+
+#### `<tab>` ####
+
+ * `heading` or `<tab-heading>`
+ 	:
+ 	Heading text or HTML markup.
+
+ * `active` <i class="icon-eye-open"></i>
+ 	_(Defaults: false)_ :
+ 	Whether tab is currently selected.
+
+ * `disabled` <i class="icon-eye-open"></i>
+ 	_(Defaults: false)_ :
+ 	Whether tab is clickable and can be activated.
+
+ * `select()`
+ 	_(Defaults: null)_ :
+ 	An optional expression called when tab is activated.

src/tabs/tabs.js

@@ -43,7 +43,10 @@ function TabsetCtrl($scope, $element) {
     transclude: true,
     scope: {},
     controller: 'TabsetController',
-    templateUrl: 'template/tabs/tabset.html'
+    templateUrl: 'template/tabs/tabset.html',
+    link: function(scope, element, attrs) {
+      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
+    }
   };
 })
 

src/tabs/test/tabsSpec.js

@@ -404,13 +404,6 @@ describe('tabs', function() {
       scope.$apply();
     }));
 
-    function titles() {
-      return elm.find('ul.nav-tabs li');
-    }
-    function contents() {
-      return elm.find('div.tab-content div.tab-pane');
-    }
-
     function expectTabActive(activeTab) {
       var _titles = titles();
       angular.forEach(scope.tabs, function(tab, i) {
@@ -454,4 +447,17 @@ describe('tabs', function() {
     });
   });
 
+  describe('vertical', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+
+      elm = $compile('<tabset vertical="true"></tabset>')(scope);
+      scope.$apply();
+    }));
+
+    it('to stack tabs', function() {
+      expect(elm.find('ul.nav-tabs')).toHaveClass('nav-stacked');
+    });
+  });
+
 });

template/tabs/tabset.html

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