{"id":15735303,"url":"https://github.com/gerrproger/angular-bayan","last_synced_at":"2025-03-31T03:47:23.748Z","repository":{"id":57178044,"uuid":"65402870","full_name":"Gerrproger/angular-bayan","owner":"Gerrproger","description":"Easily customizable accordion-like module","archived":false,"fork":false,"pushed_at":"2023-07-23T18:18:20.000Z","size":11,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T03:47:19.608Z","etag":null,"topics":["accordion","angular","angular2","bayan","collapse","customizable","module"],"latest_commit_sha":null,"homepage":"http://gerrproger.github.io/angular-bayan","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gerrproger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-10T17:30:36.000Z","updated_at":"2019-09-01T07:46:20.000Z","dependencies_parsed_at":"2024-10-27T13:04:50.985Z","dependency_job_id":"a5d19149-427d-436c-945f-14a1edffb386","html_url":"https://github.com/Gerrproger/angular-bayan","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.6,"last_synced_commit":"ed8390e234606d57da15abf0b4d02265a24d1b32"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2Fangular-bayan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2Fangular-bayan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2Fangular-bayan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2Fangular-bayan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gerrproger","download_url":"https://codeload.github.com/Gerrproger/angular-bayan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413244,"owners_count":20773053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","angular","angular2","bayan","collapse","customizable","module"],"created_at":"2024-10-04T01:12:08.725Z","updated_at":"2025-03-31T03:47:23.716Z","avatar_url":"https://github.com/Gerrproger.png","language":null,"readme":"# angular-bayan\n\n[1]: \u003chttp://github.com/Gerrproger/angular-bayan\u003e\n\n__Easily customizable accordion-like module for Angular__  \n_Shows the first line of the content in the collapsed state_\n\n### Demo\n\n[http://gerrproger.github.io/angular-bayan](http://gerrproger.github.io/angular-bayan)\n\n### Browser support\n\nWorks on IE9+ in addition to other modern browsers such as Chrome, Firefox, and Safari\n\n### Dependencies\n\nOnly Angular 1.2+\n\n### Usage\n\nGet angular-bayan.\n- via npm: `npm install angular-bayan`\n- or via Bower: `bower install angular-bayan`\n\nInclude it in your application.\n```html\n\u003cscript src=\"/angular-bayan/dist/angular-bayan.min.js\"\u003e\u003c/script\u003e\n```\n\nAdd the module `angular-bayan` as a dependency to your app module.\n```js\nvar myapp = angular.module('myapp', ['angularBayan']);\n```\n\nYou can now start using the angular-bayan directives.\n```html\n\u003cbayan\u003e\n  \u003cbayan-header\u003eTitle\u003c/bayan-header\u003e\n  \u003cbayan-content\u003e\n    \u003cdiv\u003eElement1\u003c/div\u003e\n    \u003cdiv\u003eElement2\u003c/div\u003e\n    \u003cdiv\u003eElement3\u003c/div\u003e\n    ...\n  \u003c/bayan-content\u003e\n\u003c/bayan\u003e\n```\n\nDirectives 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.\n  \nDirective `bayan-content` has two settings: `bayan-content-offset` and `bayan-content-collapsed`.  \nPass to `bayan-content-offset` number (in px) which would be added to the content height in the _collapsed_ state.  \nBy default Bayan is not collapsed but you can change it by setting `bayan-content-collapsed` to true.\n```html\n\u003cbayan-content bayan-content-collapsed=\"true\" bayan-content-offset=\"10\"\u003e\n  ...\n\u003c/bayan-content\u003e\n```\n\nBy default Bayan looks for elements to collapse right inside `bayan-content` block.\nAnd in the collapsed state hides all lines inside except the first one.\nBut you can manually specify the parent block in which your elements contained.\nJust add to the parent block `bayan-content-target` attribute.\n```html\n\u003cbayan-content\u003e\n  \u003cul bayan-content-target\u003e\n    \u003cli\u003eElement1\u003c/li\u003e\n    \u003cli\u003eElement2\u003c/li\u003e\n    \u003cli\u003eElement3\u003c/li\u003e\n    ...\n  \u003c/ul\u003e\n\u003c/bayan-content\u003e\n```\n\nBayan sets his object in the `scope`. So you can use this to determinate collapsed state or recalculate the height of the content.\n```html\n\u003cbayan\u003e\n  \u003cbayan-header ng-bind=\"bayan.opened ? 'Collapse' : 'Expand'\"\u003e\u003c/bayan-header\u003e\n  \u003cbayan-content\u003e\n  ...\n  \u003c/bayan-content\u003e\n  \u003cbutton ng-click=\"bayan.update()\"\u003eUpdate height\u003c/button\u003e\n\u003c/bayan\u003e\n```\n\nTo reinitialize the height of the Bayan content (if elements changed) you can just trigger `bayan:update` event. \n```js\n$scope.$broadcast('bayan:update');\n```\n\nBayan's _header_ and _content_ can be placed anywhere inside `bayan`.\nFor example `bayan-header` could be inside `bayan content`.\n\nBayan use `max-height` to control the height.\nSo you can easily add animation using `transitions`.\n\n### License\n\nReleased under the terms of MIT License\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerrproger%2Fangular-bayan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerrproger%2Fangular-bayan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerrproger%2Fangular-bayan/lists"}