Installation:

Step 1:

Install the ip-tab-panel component as a dependency in the project:

npm install ip-tab-panel 

Step 2:

Import module in script file:

import '../node_modules/ip-tab-panel/dist/ip-tab-panel/ip-tab-panel.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
• tab-panel-title : is the main title of the control panel

e.g:

tab-panel-title="Nos équipes"

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

e.g:

tab-panel-headers='[
  {"title":"Accessibilité", "imgPath": "assets/icons/tab-1.svg", "imgPathActive": "assets/icons/tab-1-active.svg"},
  {"title":"Pdf Document", "imgPath":"assets/icons/tab-2.svg", "imgPathActive": "assets/icons/tab-2-active.svg"},
  {"title":"Statistical", "imgPath":"assets/icons/tab-3.svg", "imgPathActive": "assets/icons/tab-3-active.svg"},
  {"title":"Certification", "imgPath":"assets/icons/tab-4.svg", "imgPathActive": "assets/icons/tab-4-active.svg"},
  {"title":"Legislation", "imgPath":"assets/icons/tab-5.svg", "imgPathActive": "assets/icons/tab-5-active.svg"}
]'

Panels content

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

e.g: Content of panel 1:

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

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

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

Customization:

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

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

To update the values use the following:

ip-tab-panel {
  --ip-tab-primary-color: #000000;
  --ip-tab-secondary-color: #fff000;
}

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

• ip-tab-panel : the container of the panels
• tab-panel : the container of the header
• tab-btn : the contents of headers
• tab-title : title of the accordions

e.g:

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

Or

SCSS:
ip-tab-panel {
  &::part(tab-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-tab-panel>
  <div class="my-class"> 
     --content 1--
  </div>

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

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