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