{"id":19719166,"url":"https://github.com/ngx-dummy/accordion-simple","last_synced_at":"2025-04-29T20:31:12.779Z","repository":{"id":42116748,"uuid":"247037180","full_name":"ngx-dummy/accordion-simple","owner":"ngx-dummy","description":"A simple accordion component to use in Angular / Ionic projects -- https://ngx-dummy.github.io/accordion-simple","archived":false,"fork":false,"pushed_at":"2024-10-10T18:53:17.000Z","size":16839,"stargazers_count":4,"open_issues_count":7,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T11:07:30.746Z","etag":null,"topics":["accordion","accordion-component","angular","angular2","collapse","expandable","foldable","ionic","ivy","javascipt","javascript","toggle","typescript","ui","widget"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngx-dummy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["VovanSuper"],"patreon":"vovansuper","open_collective":null,"ko_fi":"vovansuper","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/ovsyukov"]}},"created_at":"2020-03-13T09:45:01.000Z","updated_at":"2024-07-29T13:50:26.000Z","dependencies_parsed_at":"2024-09-23T16:30:56.041Z","dependency_job_id":"914c831a-bae1-4376-9db4-f4484ff911d7","html_url":"https://github.com/ngx-dummy/accordion-simple","commit_stats":{"total_commits":236,"total_committers":5,"mean_commits":47.2,"dds":0.1610169491525424,"last_synced_commit":"ae88b6f98592c3b62b73931109dfeec412d3ba94"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Faccordion-simple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Faccordion-simple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Faccordion-simple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Faccordion-simple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-dummy","download_url":"https://codeload.github.com/ngx-dummy/accordion-simple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251578422,"owners_count":21612035,"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","accordion-component","angular","angular2","collapse","expandable","foldable","ionic","ivy","javascipt","javascript","toggle","typescript","ui","widget"],"created_at":"2024-11-11T23:06:40.585Z","updated_at":"2025-04-29T20:31:10.506Z","avatar_url":"https://github.com/ngx-dummy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/VovanSuper","https://patreon.com/vovansuper","https://ko-fi.com/vovansuper","https://www.paypal.me/ovsyukov","https://paypal.me/ovsyukov"],"categories":[],"sub_categories":[],"readme":"\u003ccenter\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ngx-dummy/accordion-simple\" target=\"_blank\"\u003e\n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"https://avatars3.githubusercontent.com/u/62136587?s=400\u0026u=4580be0183d1496d982253d3a0d803de82465626\u0026v=4\" width=\"200\" height=\"200\" /\u003e\n    \u003c/p\u003e\n  \u003c/a\u003e\n  \u003ch2 align=\"center\"\u003e\u003cb style=\"color: teal;\"\u003e\u003ca href=\"https://www.npmjs.com/package/@ngx-dummy/accordion-simple\" target=\"_blank\"\u003e@Ngx-dummy/Accordion-simple\u003c/a\u003e\u003c/b\u003e \u003ci\u003elibrary\u003c/i\u003e\u003c/h2\u003e\n\n[![npm version](https://badge.fury.io/js/%40ngx-dummy%2Faccordion-simple.png)](https://www.npmjs.com/package/@ngx-dummy/accordion-simple)\n\n\u003c/center\u003e\n\n[![License: LGPL v3](https://img.shields.io/badge/License-LGPLv3-blue.svg)](LICENSE)\n\n![CI](https://github.com/ngx-dummy/accordion-simple/actions/workflows/ci.yml/badge.svg)\n![RELEASE](https://github.com/ngx-dummy/accordion-simple/actions/workflows/releases.yml/badge.svg)\n\n\u003c!-- ![NPM Deploy](https://github.com/ngx-dummy/accordion-simple/actions/workflows/npm-deploy.yml/badge.svg)\n![Github Pages Deploy](https://github.com/ngx-dummy/accordion-simple/actions/workflows/ghp-deploy.yml/badge.svg) --\u003e\n\n[![bundle size](https://badgen.net/bundlephobia/minzip/@ngx-dummy/accordion-simple)](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[![bundle size](https://badgen.net/bundlephobia/min/@ngx-dummy/accordion-simple)](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[![size](https://badgen.net/packagephobia/publish/@ngx-dummy/accordion-simple)](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/f5233cc1-3156-4033-9d43-5db2b6cd351b/deploy-status)](https://accordion-simple-tester.netlify.app/)\n[![Issues](https://img.shields.io/github/issues/ngx-dummy/accordion-simple)](https://github.com/ngx-dummy/accordion-simple/issues)\n[![GitHub forks](https://img.shields.io/github/forks/ngx-dummy/accordion-simple.svg?style=social\u0026label=Fork)](https://github.com/ngx-dummy/accordion-simple/fork)\n[![GitHub stars](https://img.shields.io/github/stars/ngx-dummy/accordion-simple.svg?style=social\u0026label=Star)](https://github.com/ngx-dummy/accordion-simple)\n[![downloads](https://data.jsdelivr.com/v1/package/npm/@ngx-dummy/accordion-simple/badge)](https://www.jsdelivr.com/package/npm/@ngx-dummy/accordion-simple)\n\n[![Donations](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/ovsyukov)\n[![Twitter Follow](https://img.shields.io/twitter/follow/OvsyukovV.svg?style=social)](https://twitter.com/OvsyukovV)\n\n---\n\n#### https://vovansuper.github.io/accordion-simple\n\n### Installation:\n\n##### get the script to your _index.html_:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.js\"\u003e\u003c/script\u003e\n```\n\n##### install using **npm**:\n\n```shell\nnpm install --save @ngx-dummy/accordion-simple\n```\n\n##### [use (_in your Angular/Ionic app_)](https://stackblitz.com/edit/ngx-dummy-accordion-sample?devtoolsheight=33\u0026file=src/main.ts):\n\n```typescript\nimport { NgModule, Component, enableProdMode } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { AccordionModule, Accordion, IAccordionStyling } from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';\n\n@Component({\n\tselector: 'my-app',\n\ttemplate: '\u003cngxd-accordion [accordionList]=\"sampleAccordionData\" [accordionStyling]=\"styling\"\u003e\u003c/ngxd-accordion\u003e',\n})\nclass AppCmp {\n\tsampleAccordionData: Accordion = {\n\t\tname: 'sample_accordion',\n\t\titems: [\n\t\t\t{\n\t\t\t\ttitle: 'Card 1',\n\t\t\t\tbody: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione',\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Card 2',\n\t\t\t\tbody: `\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas.\n        `,\n\t\t\t},\n\t\t],\n\t};\n\tstyling: IAccordionStyling = {\n\t\titemsGuts: '1px',\n\t\tmaxWidth: '99%',\n\t\titemStyling: {\n\t\t\theadBgColor: '#ccc',\n\t\t\theadColor: 'black',\n\t\t\tbodyBgColor: '#f9f9f9',\n\t\t\tbodyPadding: '1rem',\n\t\t\tbodyMargin: '.1rem',\n\t\t},\n\t};\n}\n\n@NgModule({\n\timports: [BrowserAnimationsModule, AccordionModule],\n\tdeclarations: [AppCmp],\n\tbootstrap: [AppCmp],\n})\nclass AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n// ... \"enableIvy\": false, in tsconfig.json to use cdn.jsdelivr.net (not recommended)\n```\n\n### or check the sibling [_sample_ app](https://github.com/VovanSuper/accordion-simple/tree/master/projects/accordion-sample) :\n\n##### clone _(and deps install)_ and run Sample app :\n\n```shell\n$~\u003e git clone https://github.com/ngx-dummy/accordion-simple.git\n$~\u003e cd accordion-simple\n$~\u003e npm install -g @angular/cli@latest \u0026\u0026 npm i\n$~\u003e npm run sample\n```\n\n##### **or .. Try _directly_:**\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vovansuper/accordion-simple)\n\n**Make sure in install `BrowserAnimationsModule` or `NoopAnimationsModule` in the `AppModule` of Your application**\n\n---\n\n## Main idea\n\nSimple Angular accordion component and a simple demonstrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it.\n\nAny suggestions for improvement are welcome. Please [setup a new issue](https://github.com/VovanSuper/accordion-simple/issues/new) if you have any problems using this package or find ways in which it could be improved.\nTo ask for features / report on a bug follow the guide in : [Issue Report](./.github/ISSUE_TEMPLATE/bug_report.md)\n\n\u003cbr /\u003e\n\n\u003cdetails closed\u003e\n\u003csummary\u003eTODO:\u003c/summary\u003e\n\n- [ x ] Dynamic styling of accordion and accordion items (headers, bodies...)\n\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n---\n\n## Documentation\n\n- General typeDoc generated types of the Accordion-simple library are available in [[docs](./docs/typedocs/index.html)]\n\n- Base element is [`\u003cngxd-accordion\u003e`](./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts)\n\n- [`Accordion`](./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts) should have `@Input` on type [ [IAccordion ](./projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts)]\n\n- Sample usage vovansuper.github.io/accordion-simple\n\n---\n\n\u003cbr/\u003e\n\n\u003cdetails closed\u003e\n\u003csummary\u003eOther projects:\u003c/summary\u003e\n\n|     Name      |                          URL                           |\n| :-----------: | :----------------------------------------------------: |\n| Select Simple | https://www.npmjs.com/package/@ngx-dummy/select-simple |\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n---\n\n##### Redistribution\n\nLicensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.\n\n[![License: LGPL v3](https://img.shields.io/badge/License-LGPLv3-blue.svg)](LICENSE)\n\nLicensed under the GNU LGPLv3 License - see the [LICENSE](LICENSE) file for details.\n_Copyright (c) belongs to Vladimir Ovsyukov \u003c\u003covsyukov@yandex.com\u003e\u003e; Please, freely use **AS_IS** (under conditions defined within the [LICENSE](LICENSE))_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-dummy%2Faccordion-simple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-dummy%2Faccordion-simple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-dummy%2Faccordion-simple/lists"}