BjAccordion

Composants Vue pour un groupe d’accordéons. BjAccordion fournit le contexte ; BjAccordionItem définit id, titre et contenu par slot.

Utilisation

<script setup>
import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjAccordion exclusive>
    <BjAccordionItem id="a1" title="Section 1">Contenu 1</BjAccordionItem>
    <BjAccordionItem id="a2" title="Section 2">Contenu 2</BjAccordionItem>
  </BjAccordion>
</template>

Aperçu (HTML)

Section 1

Contenu 1

Section 2

Contenu 2

exclusive : false et true

Valeurs : false (défaut) ou true. Avec exclusive, l’ouverture d’un item ferme les autres.

exclusive="false"

<BjAccordion :exclusive="false">
  <BjAccordionItem id="x1" title="Premier">Texte A</BjAccordionItem>
  <BjAccordionItem id="x2" title="Deuxième">Texte B</BjAccordionItem>
</BjAccordion>

exclusive="true"

<BjAccordion :exclusive="true">
  <BjAccordionItem id="y1" title="Onglet A">Un seul ouvert à la fois</BjAccordionItem>
  <BjAccordionItem id="y2" title="Onglet B">Ferme l’autre au clic</BjAccordionItem>
</BjAccordion>

Contenu riche dans l’item (slot par défaut)

<BjAccordion>
  <BjAccordionItem id="doc" title="Pièces jointes">
    <ul class="bj-list">
      <li><a href="#">rapport.pdf</a></li>
      <li><a href="#">annexe.docx</a></li>
    </ul>
  </BjAccordionItem>
</BjAccordion>

Combinaisons exclusive × nombre d’items

Même contenu Vue : faites varier exclusive et la liste d’items (ids uniques obligatoires).

<!-- exclusive false : plusieurs panneaux ouverts possible -->
<BjAccordion :exclusive="false">
  <BjAccordionItem id="c1" title="A">…</BjAccordionItem>
  <BjAccordionItem id="c2" title="B">…</BjAccordionItem>
  <BjAccordionItem id="c3" title="C">…</BjAccordionItem>
</BjAccordion>

<!-- exclusive true : un seul ouvert ; ids toujours uniques -->
<BjAccordion exclusive>
  <BjAccordionItem id="c1" title="A">…</BjAccordionItem>
  <BjAccordionItem id="c2" title="B">…</BjAccordionItem>
  <BjAccordionItem id="c3" title="C">…</BjAccordionItem>
</BjAccordion>

exclusive=false (deux corps ouverts)

Panneau A

Panneau B

Attributs sur la racine (BjAccordion)

Les attributs non déclarés (class, data-*, aria-*) sont appliqués sur le conteneur .bj-accordions.

<BjAccordion class="bj-stack" data-testid="faq" aria-label="FAQ">
  <BjAccordionItem id="f1" title="Question 1">Réponse 1</BjAccordionItem>
</BjAccordion>

Événements Vue

Pas d’emit : l’ouverture/fermeture est gérée en interne par le contexte injecté (toggle au clic sur l’en-tête).

v-model

Pas de v-model : l’état ouvert/fermé n’est pas synchronisé vers le parent ; utilisez plusieurs items pour le contenu statique ou contrôlé côté enfant.

Props — BjAccordion

Prop	Description
`exclusive`	Si true, un seul panneau ouvert à la fois. Si false (défaut), plusieurs panneaux peuvent être ouverts.

Props — BjAccordionItem

Prop	Description
`id`	Identifiant stable de l’item (clé d’état, aria).
`title`	Texte du bouton d’en-tête.

Slots

Slot	Description
`BjAccordion (default)`	Enfants : un ou plusieurs BjAccordionItem.
`BjAccordionItem (default)`	Corps du panneau (affiché quand l’item est ouvert).