ip-accordeon v0.0.34

Installation:

Step 1:

Install the ip-accordeon component as a dependency in the project:

npm install ip-accordeon 

Step 2:

Import module in script file:

import '../node_modules/ip-accordeon/dist/ip-accordeon/ip-accordeon.esm';

Usage:

To use the component, we make us of tag: As input, we have the following options:

Inputs

• title-tag="h2" : represents the tag we want to use in the header
• is-first-panel-open="true" : if we want to have the first panel open, we keep to true, else to false

• is-single-open="true" : this option is used if we need to keep one panel open at a time

• is-single-open : this option is used if we need to keep one panel open at a time

e.g:

is-single-open="true"

• accordeon-headers : this is used to set the tab panel header title

e.g:

accordeon-headers='[
  {"title": "Accessibilité"},
  {"title": "Pdf Document"},
  {"title": "Statistical"},
  {"title": "Certification"},
  {"title": "Legislation"}
]'

Panels content

The contents of the panel should have as attribute slot="accordeon-1" and value of accordeon-* incremented accordingly

e.g: Content of panel 1:

<div slot="accordeon-1"> 
 --content 1--
</div>

content of panel 2: 
<div slot="accordeon-2"> 
 --content 2--
</div>

content of panel 3: 
<div slot="accordeon-3"> 
 --content 3--
</div>

Customization:

We have a set of predefined variable used to customisation the accordeon:

• --ip-acc-primary-color
• --ip-acc-secondary-color
• --ip-acc-font
• --ip-acc-icon

To update the values use the following:

ip-accordeon {
  --ip-acc-primary-color: #000000;
  --ip-acc-secondary-color: #fff000;
}

We have a set of classes that could be used to customise accordingly:

• ip-accordeon : the container of the panels
• acc-panel : the container of the header
• acc-btn : the contents of headers

• acc-title : title of the accordions

e.g:

CSS:
ip-accordeon::part(acc-btn) {
    background-color: #305b38;
}

Or

SCSS:
ip-accordeon {
  &::part(acc-btn) {
    background-color: #305b38;
  }
}

The content of the panels could be dynamic, use a class to target the elements used in the panels:

e.g:

<ip-accordeon>
  <div class="my-class"> 
     --content 1--
  </div>

  <div class="my-class"> 
    --content 2--
  </div>

  <div class="my-class"> 
   --content 3--
  </div>
</ip-accordeon>