npm:accordion-simple-lib--project

README

@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 { BrowserModule } from '@angular/platform-browser';
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: [BrowserModule, AccordionModule],
    declarations: [AppCmp],
    bootstrap: [AppCmp],
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);
// ... "enableIvy": false, in tsconfig.json

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:**

Main idea

Simple Angular accordion component and a simple demostrator 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:

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

Redistribution

Licensed under the GNU GPLv3 License - see the LICENSE file for details.

Licensed under the GNU GPLv3 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)

Usage no npm install needed!