Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tabs): add support for other navigation types, like 'pills'
Browse files Browse the repository at this point in the history
  • Loading branch information
bekos authored and pkozlowski-opensource committed Jun 9, 2013
1 parent 497ba15 commit 53e0a39
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/tabs/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/tabs/docs/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ var TabsDemoCtrl = function ($scope) {
alert("You've selected the alert tab!");
});
};

$scope.navType = 'pills';
};
4 changes: 4 additions & 0 deletions src/tabs/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand Down
1 change: 1 addition & 0 deletions src/tabs/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
};
})
Expand Down
15 changes: 15 additions & 0 deletions src/tabs/test/tabsSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});

});
2 changes: 1 addition & 1 deletion template/tabs/tabset.html
Original file line number Diff line number Diff line change
@@ -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"
Expand Down

0 comments on commit 53e0a39

Please sign in to comment.