mgcrea.ngStrap.collapse
Add quick, dynamic collapsable functionality to transition through panels of local content.
$scope.panels = {{panels | json}};
$scope.panels.activePanel = {{ panels.activePanel }};
By using the allowMultiple option, you can have multiple open panels at the same time. When using allowMultiple option, ngModel binds to an array with the open panel indexes.
$scope.multiplePanels.activePanels = {{ multiplePanels.activePanels }};
Append a bs-collapse attribute to any element and several bs-collapse-toggle,bs-collapse-target attributes to children elements to enable the directive.
Pane animation is done with the active class and requires custom CSS.
.collapse.am-collapse {
animation-duration: .3s;
animation-timing-function: ease;
animation-fill-mode: backwards;
overflow: hidden;
&.in-remove {
animation-name: collapse;
display: block;
}
&.in-add {
animation-name: expand;
}
}
Options can be passed via data attributes or as an AngularJS expression to evaluate as an object on
bs-collapse. For data attributes, append the option name to data-, as in data-animation="".
bs-collapse-toggle can be hard mapped to a bs-collapse-target by passing its target index to the attribute (bs-collapse-toggle="1")
| Name | type | default | description |
|---|---|---|---|
| animation | string | am-fade | apply a CSS animation to the popover with ngAnimate |
| activeClass | string | in |
Class to be applied to the animated element |
| disallowToggle | boolean | false |
Prevents elements from being collapsed by clicking its toggle element, i.e., a panel can only be closed by opening another panel. |
| startCollapsed | boolean | false |
Start with all elements collapsed |
| allowMultiple | boolean | false |
Allow multiple open panels |
You can override global defaults for the plugin with $collapseProvider.defaults
angular.module('myApp')
.config(function($collapseProvider) {
angular.extend($collapseProvider.defaults, {
animation: 'am-flip-x'
});
})