accordion-simple
@Ngx-dummy/Accordion-simple library
https://vovansuper.github.io/accordion-simple
Installation:
get the script to your index.html:
<script src="https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.js"></script>
install using npm:
npm install --save @ngx-dummy/accordion-simple
use (in your Angular/Ionic app):
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: '<ngxd-accordion [accordionList]="sampleAccordionData" [accordionStyling]="styling"></ngxd-accordion>',})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 :
clone (and deps install) and run Sample app :
$~> 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:
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 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
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]
-
Base element is
<ngxd-accordion>
-
Accordion
should have@Input
on type [ IAccordion ] -
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 file for details.
Licensed under the GNU LGPLv3 License - see the LICENSE file for details. Copyright (c) belongs to Vladimir Ovsyukov <ovsyukov@yandex.com>; Please, freely use AS_IS (under conditions defined within the LICENSE)
Описание
Clone of https://github.com/ngx-dummy/accordion-simple.git
Языки
TypeScript
- HTML
- SCSS
- Shell
- JavaScript