Skip to content

Commit

Permalink
feat(accordion): allow custom panel class
Browse files Browse the repository at this point in the history
* add support for custom panel class

fixes angular-ui#3968
  • Loading branch information
icfantv committed Aug 20, 2015
1 parent 7d3ba1e commit 9823be9
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/accordion/accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
accordionCtrl.addGroup(scope);

scope.openClass = attrs.openClass || 'panel-open';
scope.panelClass = attrs.panelClass;
scope.$watch('isOpen', function(value) {
element.toggleClass(scope.openClass, value);
if (value) {
Expand Down
2 changes: 2 additions & 0 deletions src/accordion/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,7 @@ The body of each accordion group is transcluded in to the body of the collapsibl

### Accordion Group Settings ###

* `panel-class` (Defaults: `default`) :
Add ability to use Bootstrap's contextual panel classes (primary, success, info, etc...) or your own. This must be a string.
* `template-url` (Defaults: `template/accordion/accordion-group.html`) :
Add ability to override the template url used. Note that this must be a string
22 changes: 21 additions & 1 deletion src/accordion/test/accordion.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -515,7 +515,6 @@ describe('accordion', function() {
});
});


describe('accordion-heading attribute, with repeating accordion-groups', function() {
it('should clone the accordion-heading for each group', function() {
element = $compile('<accordion><accordion-group ng-repeat="x in [1,2,3]"><div accordion-heading>{{x}}</div></accordion-group></accordion>')(scope);
Expand All @@ -528,5 +527,26 @@ describe('accordion', function() {
});
});

describe('accordion group panel class - #3968', function() {
it('should use the default value when panel class is falsy', function() {
element = $compile('<accordion><accordion-group heading="Heading">Content</accordion-group></accordion>')(scope);
scope.$digest();
groups = element.find('.panel');
expect(groups.eq(0)).toHaveClass('panel-default');

element = $compile('<accordion><accordion-group heading="Heading" panel-class="">Content</accordion-group></accordion>')(scope);
scope.$digest();
groups = element.find('.panel');
expect(groups.eq(0)).toHaveClass('panel-default');
});

it('should use the specified value when not falsy', function() {
element = $compile('<accordion><accordion-group heading="Heading" panel-class="success">Content</accordion-group></accordion>')(scope);
scope.$digest();
groups = element.find('.panel');
expect(groups.eq(0)).toHaveClass('panel-success');
expect(groups.eq(0)).not.toHaveClass('panel-default');
});
});
});
});
2 changes: 1 addition & 1 deletion template/accordion/accordion-group.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="panel panel-default">
<div class="panel panel-{{panelClass || 'default'}}">
<div class="panel-heading">
<h4 class="panel-title">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
Expand Down

0 comments on commit 9823be9

Please sign in to comment.