diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html index 0c4c24d298..e2850b5948 100644 --- a/src/tabs/docs/demo.html +++ b/src/tabs/docs/demo.html @@ -45,6 +45,14 @@
+ Tabbed pills with CSS classes + + Tab 1 content + Tab 2 content + + +
+ Tabs using nested forms:
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md index 7c542b92bd..689b379563 100644 --- a/src/tabs/docs/readme.md +++ b/src/tabs/docs/readme.md @@ -27,6 +27,16 @@ AngularJS version of the tabs directive. ### uib-tab settings +* `active` + $ + + _(Default: `false`)_ - + Whether tab is currently selected. + +* `classes` + $ - + An optional string of space-separated CSS classes. + * `deselect()` $ - An optional expression called when tab is deactivated. diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index 524cad2714..e7f42805e5 100644 --- a/src/tabs/tabs.js +++ b/src/tabs/tabs.js @@ -119,6 +119,7 @@ angular.module('ui.bootstrap.tabs', []) scope: { heading: '@', index: '=?', + classes: '@?', onSelect: '&select', //This callback is called in contentHeadingTransclude //once it inserts the tab's content into the dom onDeselect: '&deselect' @@ -143,6 +144,10 @@ angular.module('ui.bootstrap.tabs', []) } } + if (angular.isUndefined(attrs.classes)) { + scope.classes = ''; + } + scope.select = function() { if (!scope.disabled) { var index; diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js index f5c92a5eca..8b9c44dbaf 100644 --- a/src/tabs/test/tabs.spec.js +++ b/src/tabs/test/tabs.spec.js @@ -34,16 +34,18 @@ describe('tabs', function() { scope.first = '1'; scope.second = '2'; scope.active = 1; + scope.firstClass = 'first-class'; + scope.secondClass = 'second-class-1 second-class-2'; scope.selectFirst = jasmine.createSpy(); scope.selectSecond = jasmine.createSpy(); scope.deselectFirst = jasmine.createSpy(); scope.deselectSecond = jasmine.createSpy(); elm = $compile([ '', - ' ', + ' ', ' first content is {{first}}', ' ', - ' ', + ' ', ' Second Tab {{second}}', ' second content is {{second}}', ' ', @@ -77,6 +79,15 @@ describe('tabs', function() { expect(scope.active).toBe(1); }); + it('should set optional classes on each tab', function() { + expect(titles().eq(0)).toHaveClass(scope.firstClass); + + var secondClassArr = scope.secondClass.split(' '); + secondClassArr.forEach(function(clazz) { + expect(titles().eq(1)).toHaveClass(clazz); + }); + }); + it('should change active on click', function() { titles().eq(1).find('> a').click(); expect(contents().eq(1)).toHaveClass('active'); diff --git a/template/tabs/tab.html b/template/tabs/tab.html index 329ba84ca8..886417d42e 100644 --- a/template/tabs/tab.html +++ b/template/tabs/tab.html @@ -1,3 +1,3 @@ -