imx-accordion v0.0.5
imx-accordion
infomax pattern library: standard accordion module
Installing
Currently it is only possible to install imx-accordion as a npm package:
$ npm install imx-accordionPreparation
In order to use imx-accordion, following steps are necessary:
1. Markup Structure
An Accordion consists of a main node that contains a wrapper node for each accordion item. The item itself is made up of a title element and a content element. The title element will be the clickable HTMLElement that opens and closes the accordion item:
// html
<div data-imxaccordion>
<div data-imxaccordion_item>
<h2 data-imxaccordion_title>This is the clickable headline</h2>
<div data-imxaccordion_content>This is the content wrapper</div>
</div>
</div>You can use these given data attributes to identify main node, items, titles and content wrapper for imx-accordion:
- data-imxaccordion – the main node of your Accordion
- data-imxaccordion_item – an item node
- data-imxaccordion_title – the title of an item
- data-imxaccordion_content – the content of an item
2. Import the JavaScript Module
After the installation inside the project, you will need to import imx-accordion inside your javascript/typescript code:
// javascript
import {default as imx_accordion} from './node_modules/imx-accordion/lib/index.js';3. Import the CSS Styles
There are some styles that are needed for imx-accordion to work. You can simply import the CSS File in your project:
// css
@import 'node_modules/imx-accordion/lib/index.css';Basic Usage
Basicly imx-accordion is a generator for Accordion Objects.
Global Call
The most simple way to use imx-accordion is to globaly call the create function:
// javascript
const accordionCollection = imx_accordion.create();// typescript
const accordionCollection : Accordion[] = imx_accordion.create();This will return you an Array that contains Accordion Objects.
Specific HTMLElement
It is also possible to create an Accordion on a specific HTMLElement. For this you can call the function createOnSpecificNode:
// javascript
const myAccordionObject = imx_accordion.createOnSpecificNode(document.getElementById('myAccordionId'));// typescript
const myAccordionObject : Accordion = imx_accordion.createOnSpecificNode(document.getElementById('myAccordionId'));Configuration
There are allready some config options you can use to individualize your Accordions:
| label | type | description |
|---|---|---|
| autoClose | boolean | if true - any open item will be closed when the user opens another item |
| initialOpen | Numbers[] | we can pass an array that contains the indexes of the items that should initially be open |
| initialOpen | 'all' | we can also simply state that all items should be open by passing the string value 'all' |
| useMockStyles | boolean | to get the Accordion quickly up and running, we can use the optional mock styles for some standard visuals |
| itemClass | string | if we dont want to use the data attributes to mark accordion items, we can also define a css class that is used to look up items |
| titleClass | string | if we dont want to use the data attributes to mark title nodes, we can also define a css class that is used to look them up |
| contentClass | string | if we dont want to use the data attributes to mark content nodes, we can also define a css class that is used to look them up |
Inline Configuration
We can provide a configuration by using a json string as value for the data attribute of the main node:
// html
<div data-imxaccordion="{ "autoClose":false, "initialOpen":[0], "useMockStyles":true }"> … </div>Configuration inside the script
We can also pass a config inside of our script.
// javascript
const accordionCollection = imx_accordion.create({
useMockStyles : true,
initialOpen : 'all',
autoClose : false
});
const myAccordionObject = imx_accordion.createOnSpecificNode(document.getElementById('myAccordionId'), {
useMockStyles : true,
initialOpen : 'all',
autoClose : false
});// typescript
const accordionCollection : Accordion[] = imx_accordion.create({
useMockStyles : true,
initialOpen : 'all',
autoClose : false
});
const myAccordionObject : Accordion = imx_accordion.createOnSpecificNode(document.getElementById('myAccordionId'), {
useMockStyles : true,
initialOpen : 'all',
autoClose : false
});Note if we use both, the inline configuration will allways overwrite the script configuration
Authors
- Axel Güldner@infomax