Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngx-dummy/accordion-simple
A simple accordion component to use in Angular / Ionic projects -- https://ngx-dummy.github.io/accordion-simple
https://github.com/ngx-dummy/accordion-simple
accordion accordion-component angular angular2 collapse expandable foldable ionic ivy javascipt javascript toggle typescript ui widget
Last synced: 4 days ago
JSON representation
A simple accordion component to use in Angular / Ionic projects -- https://ngx-dummy.github.io/accordion-simple
- Host: GitHub
- URL: https://github.com/ngx-dummy/accordion-simple
- Owner: ngx-dummy
- License: other
- Created: 2020-03-13T09:45:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T18:53:17.000Z (about 1 month ago)
- Last Synced: 2024-11-07T14:39:44.175Z (9 days ago)
- Topics: accordion, accordion-component, angular, angular2, collapse, expandable, foldable, ionic, ivy, javascipt, javascript, toggle, typescript, ui, widget
- Language: TypeScript
- Homepage:
- Size: 16.1 MB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
@Ngx-dummy/Accordion-simple library
[](https://www.npmjs.com/package/@ngx-dummy/accordion-simple)
[](LICENSE)
[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)
[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)
[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)
[](https://accordion-simple-tester.netlify.app/)
[](https://github.com/ngx-dummy/accordion-simple/issues)
[](https://github.com/ngx-dummy/accordion-simple/fork)
[](https://github.com/ngx-dummy/accordion-simple)
[](https://www.jsdelivr.com/package/npm/@ngx-dummy/accordion-simple)
[](https://paypal.me/ovsyukov)
[](https://twitter.com/OvsyukovV)
---
#### https://vovansuper.github.io/accordion-simple
### Installation:
##### get the script to your _index.html_:
```html
```
##### install using **npm**:
```shell
npm install --save @ngx-dummy/accordion-simple
```
##### [use (_in your Angular/Ionic app_)](https://stackblitz.com/edit/ngx-dummy-accordion-sample?devtoolsheight=33&file=src/main.ts):
```typescript
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AccordionModule, Accordion, IAccordionStyling } from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';
@Component({
selector: 'my-app',
template: '',
})
class AppCmp {
sampleAccordionData: Accordion = {
name: 'sample_accordion',
items: [
{
title: 'Card 1',
body: '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',
},
{
title: 'Card 2',
body: `
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas.
`,
},
],
};
styling: IAccordionStyling = {
itemsGuts: '1px',
maxWidth: '99%',
itemStyling: {
headBgColor: '#ccc',
headColor: 'black',
bodyBgColor: '#f9f9f9',
bodyPadding: '1rem',
bodyMargin: '.1rem',
},
};
}
@NgModule({
imports: [BrowserAnimationsModule, AccordionModule],
declarations: [AppCmp],
bootstrap: [AppCmp],
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
// ... "enableIvy": false, in tsconfig.json to use cdn.jsdelivr.net (not recommended)
```
### or check the sibling [_sample_ app](https://github.com/VovanSuper/accordion-simple/tree/master/projects/accordion-sample) :
##### clone _(and deps install)_ and run Sample app :
```shell
$~> git clone https://github.com/ngx-dummy/accordion-simple.git
$~> cd accordion-simple
$~> npm install -g @angular/cli@latest && npm i
$~> npm run sample
```
##### **or .. Try _directly_:**
[](https://gitpod.io/#https://github.com/vovansuper/accordion-simple)
**Make sure in install `BrowserAnimationsModule` or `NoopAnimationsModule` in the `AppModule` of Your application**
---
## Main idea
Simple 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.
Any 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.
To ask for features / report on a bug follow the guide in : [Issue Report](./.github/ISSUE_TEMPLATE/bug_report.md)
TODO:
- [ x ] Dynamic styling of accordion and accordion items (headers, bodies...)
---
## Documentation
- General typeDoc generated types of the Accordion-simple library are available in [[docs](./docs/typedocs/index.html)]
- Base element is [``](./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts)
- [`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)]
- Sample usage vovansuper.github.io/accordion-simple
---
Other projects:
| Name | URL |
| :-----------: | :----------------------------------------------------: |
| Select Simple | https://www.npmjs.com/package/@ngx-dummy/select-simple |
---
##### Redistribution
Licensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.
[](LICENSE)
Licensed under the GNU LGPLv3 License - see the [LICENSE](LICENSE) file for details.
_Copyright (c) belongs to Vladimir Ovsyukov <>; Please, freely use **AS_IS** (under conditions defined within the [LICENSE](LICENSE))_