Easily customizable accordion-like module for Angular
Shows the first line of the content in the collapsed state
http://gerrproger.github.io/angular-bayan
Works on IE9+ in addition to other modern browsers such as Chrome, Firefox, and Safari
Only Angular 1.2+
Get angular-bayan.
- via npm:
npm install angular-bayan
- or via Bower:
bower install angular-bayan
Include it in your application.
<script src="/angular-bayan/dist/angular-bayan.min.js"></script>
Add the module angular-bayan
as a dependency to your app module.
var myapp = angular.module('myapp', ['angularBayan']);
You can now start using the angular-bayan directives.
<bayan>
<bayan-header>Title</bayan-header>
<bayan-content>
<div>Element1</div>
<div>Element2</div>
<div>Element3</div>
...
</bayan-content>
</bayan>
Directives can be referenced as element names or attributes. bayan-header
should contain the header of an accordion. bayan-content
should contain elements, it would be collapsed.
Directive bayan-content
has two settings: bayan-content-offset
and bayan-content-collapsed
.
Pass to bayan-content-offset
number (in px) which would be added to the content height in the collapsed state.
By default Bayan is not collapsed but you can change it by setting bayan-content-collapsed
to true.
<bayan-content bayan-content-collapsed="true" bayan-content-offset="10">
...
</bayan-content>
By default Bayan looks for elements to collapse right inside bayan-content
block.
And in the collapsed state hides all lines inside except the first one.
But you can manually specify the parent block in which your elements contained.
Just add to the parent block bayan-content-target
attribute.
<bayan-content>
<ul bayan-content-target>
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
...
</ul>
</bayan-content>
Bayan sets his object in the scope
. So you can use this to determinate collapsed state or recalculate the height of the content.
<bayan>
<bayan-header ng-bind="bayan.opened ? 'Collapse' : 'Expand'"></bayan-header>
<bayan-content>
...
</bayan-content>
<button ng-click="bayan.update()">Update height</button>
</bayan>
To reinitialize the height of the Bayan content (if elements changed) you can just trigger bayan:update
event.
$scope.$broadcast('bayan:update');
Bayan's header and content can be placed anywhere inside bayan
.
For example bayan-header
could be inside bayan content
.
Bayan use max-height
to control the height.
So you can easily add animation using transitions
.
Released under the terms of MIT License