@phemium-costaisa/accordion

Accordion Web Component

Installation

 npm i @phemium-costaisa/accordion

Usage

In your HTML files:

 <edmbn-accordion header-title="Title" expanded bordered>
    <div slot="content">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
 </edmbn-accordion>

Include attribute slot="content" to all the content that you want to be inside the accordion.

Javascript or AngularJS (1.x)

<script src="./plugins/edmbn-accordion.js"></script>

Angular 2+

Somewhere in your project (e.g. main.ts):

import { defineCustomElements as accordionLoader } from 'edmbn-accordion/loader';
accordionLoader(window);

React

On your index.js:

import { defineCustomElements as accordionLoader } from 'edmbn-accordion/loader';
accordionLoader(window);

Vue

import { defineCustomElements as accordionLoader } from 'edmbn-accordion/loader';
Vue.config.ignoredElements = [/test-\w*/];
accordionLoader(window);

Properties

Property	Default	Description
header-title		Set the accordion header title.
expanded	false	Set the default position.
bordered	false	Set border top and bottom by default on header.
lost-focus-close	false	Whether to close accordion when loosing focus.
observe-content	false	Set to true when content is dynamic.
debug	false	Set to true for debugging logs.

Slots

Name	Description
content	HTML Content to put inside accordion when unfolded
right	HTML Content to put in the right part of the header

Customize CSS

Variable	Default
--header-height	50px
--header-background-color	white
--header-button-color	black
--header-button-width	1.5rem
--header-text-color	black
--header-font-weight	700
--header-font-size	1rem
--header-border-top	var(--border-width) var(--border-style) var(--border-color)
--header-border-bottom	var(--border-width) var(--border-style) var(--border-color)
--header-border-left	none
--header-border-right	none
--border-style	solid
--border-width	1px
--border-color	#ccc

Contribute

git clone https://github.com/phemium/accordion.git
cd accordion

and run:

npm install
npm start

To build the component for production, run:

npm run build