# ip-accordeon

> Stencil Component Starter

Latest version **0.0.34** (published 2023-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ip-accordeon
pnpm add ip-accordeon
yarn add ip-accordeon
bun add ip-accordeon
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.34 |
| Published | 2023-10-24 |
| First published | 2022-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 289 |
| Maintainers | ipedis |

## Links

- npm: https://www.npmjs.com/package/ip-accordeon
- Repository: https://github.com/ionic-team/stencil-component-starter
- Homepage: https://github.com/ionic-team/stencil-component-starter#readme
- Issues: https://github.com/ionic-team/stencil-component-starter/issues
- npm.io page: https://npm.io/package/ip-accordeon

## Dependencies (3)

- [ip-accordeon](https://npm.io/package/ip-accordeon.md) ^0.0.33
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0
- [@stencil/sass](https://npm.io/package/@stencil/sass.md) ^2.0.0

## Recent versions

- 0.0.34 (latest) — 2023-10-24
- 0.0.33 — 2023-10-23
- 0.0.32 — 2023-10-18
- 0.0.31 — 2023-02-07
- 0.0.30 — 2023-02-07
- 0.0.29 — 2023-01-31
- 0.0.28 — 2023-01-31
- 0.0.27 — 2023-01-31
- 0.0.26 — 2023-01-28
- 0.0.25 — 2023-01-26
- 0.0.24 — 2023-01-26
- 0.0.23 — 2023-01-26
- 0.0.22 — 2023-01-26
- 0.0.21 — 2023-01-26
- 0.0.20 — 2023-01-26
- … 19 more at https://npm.io/package/ip-accordeon/versions

## README

# Installation:

## Step 1:

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

```bash
npm install ip-accordeon 
```

## Step 2:

Import module in script file: 

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

# Usage:

To use the component, we make us of tag: <ip-tab-panel></ip-tab-panel>
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:*

```bash
is-single-open="true"
```

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

*e.g:*

```bash
accordeon-headers='[
  {"title": "Accessibilité"},
  {"title": "Pdf&nbsp;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: 

```html
<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:

```css
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
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:* 

```html
<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>
```

---
_Source: https://npm.io/package/ip-accordeon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._