Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gerrproger/angular-bayan
Easily customizable accordion-like module
https://github.com/gerrproger/angular-bayan
accordion angular angular2 bayan collapse customizable module
Last synced: 15 days ago
JSON representation
Easily customizable accordion-like module
- Host: GitHub
- URL: https://github.com/gerrproger/angular-bayan
- Owner: Gerrproger
- License: mit
- Created: 2016-08-10T17:30:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-23T18:18:20.000Z (over 1 year ago)
- Last Synced: 2024-10-24T10:51:33.784Z (15 days ago)
- Topics: accordion, angular, angular2, bayan, collapse, customizable, module
- Homepage: http://gerrproger.github.io/angular-bayan
- Size: 10.7 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-bayan
[1]:
__Easily customizable accordion-like module for Angular__
_Shows the first line of the content in the collapsed state_
### Demo
[http://gerrproger.github.io/angular-bayan](http://gerrproger.github.io/angular-bayan)
### Browser support
Works on IE9+ in addition to other modern browsers such as Chrome, Firefox, and Safari
### Dependencies
Only Angular 1.2+
### Usage
Get angular-bayan.
- via npm: `npm install angular-bayan`
- or via Bower: `bower install angular-bayan`
Include it in your application.
```html
```
Add the module `angular-bayan` as a dependency to your app module.
```js
var myapp = angular.module('myapp', ['angularBayan']);
```
You can now start using the angular-bayan directives.
```html
Title
Element1
Element2
Element3
...
```
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.
```html
...
```
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.
```html
- Element1
- Element2
- Element3
...
```
Bayan sets his object in the `scope`. So you can use this to determinate collapsed state or recalculate the height of the content.
```html
...
Update height
```
To reinitialize the height of the Bayan content (if elements changed) you can just trigger `bayan:update` event.
```js
$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`.
### License
Released under the terms of MIT License