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 @@