ip-accordeon
v0.0.34
Published
Stencil Component Starter
Downloads
1,880
Readme
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>