diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html index f910358aab..a747b1c3e1 100644 --- a/src/tabs/docs/demo.html +++ b/src/tabs/docs/demo.html @@ -18,4 +18,11 @@ I've got an HTML heading, and a select callback. Pretty cool! + +
+ + + Vertical content 1 + Vertical content 2 + diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md index 150856c5fe..dda14d1ed2 100644 --- a/src/tabs/docs/readme.md +++ b/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 `` element inside as the heading. +#### `` #### + + * `vertical` + _(Defaults: false)_ : + Whether tabs appear vertically stacked. + +#### `` #### + + * `heading` or `` + : + Heading text or HTML markup. + + * `active` + _(Defaults: false)_ : + Whether tab is currently selected. + + * `disabled` + _(Defaults: false)_ : + Whether tab is clickable and can be activated. + + * `select()` + _(Defaults: null)_ : + An optional expression called when tab is activated. \ No newline at end of file diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index e47a7ab48d..7b56fd4679 100644 --- a/src/tabs/tabs.js +++ b/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; + } }; }) diff --git a/src/tabs/test/tabsSpec.js b/src/tabs/test/tabsSpec.js index 3ca08ac9f9..b95c5529bf 100644 --- a/src/tabs/test/tabsSpec.js +++ b/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('')(scope); + scope.$apply(); + })); + + it('to stack tabs', function() { + expect(elm.find('ul.nav-tabs')).toHaveClass('nav-stacked'); + }); + }); + }); diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html index 08d3212835..70c4fa84e8 100644 --- a/template/tabs/tabset.html +++ b/template/tabs/tabset.html @@ -1,6 +1,6 @@
-