Miss any of our Open RFC calls?Watch the recordings here! »

@ngx-dummy/accordion-simple

0.3.11 • Public • Published

@Ngx-dummy/Accordion-simple library

npm version

License: GPL v3

CI RELEASE

bundle size bundle size size deps Netlify Status Issues GitHub forks GitHub stars downloads

Donations Twitter Follow


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.min.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);
// inside your 'index.html' :  <my-app>loading</my-app>

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:

Open in Gitpod


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.

License: GPL v3

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)

Install

npm i @ngx-dummy/accordion-simple

DownloadsWeekly Downloads

63

Version

0.3.11

License

GPL-3.0

Unpacked Size

608 kB

Total Files

45

Last publish

Collaborators

  • avatar