BjAccordion

Composants React pour un groupe d’accordéons. BjAccordion fournit le contexte d’état (ensemble des panneaux ouverts) ; BjAccordionItem exige un id stable, un title et le contenu en enfants. Aucun callback externe : l’ouverture se fait via le bouton d’en-tête.

Utilisation

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjAccordion exclusive>
      <BjAccordionItem id="a1" title="Section 1">
        <p>Contenu 1</p>
      </BjAccordionItem>
      <BjAccordionItem id="a2" title="Section 2">
        <p>Contenu 2</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

Aperçu

Section 1

Contenu 1

Section 2

Contenu 2

exclusive à false (défaut) — plusieurs panneaux ouverts

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

/** exclusive omis ou false : plusieurs ids peuvent coexister dans l’état ouvert */
export function MultiOpen() {
  return (
    <BjAccordion exclusive={false}>
      <BjAccordionItem id="x" title="Premier">
        <p>Bloc A</p>
      </BjAccordionItem>
      <BjAccordionItem id="y" title="Deuxième">
        <p>Bloc B</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

exclusive à true — un seul panneau ouvert

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

/** exclusive true : ouvrir un item ferme les autres */
export function SingleOpen() {
  return (
    <BjAccordion exclusive>
      <BjAccordionItem id="one" title="Onglet 1">
        <p>Contenu 1</p>
      </BjAccordionItem>
      <BjAccordionItem id="two" title="Onglet 2">
        <p>Contenu 2</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

BjAccordionItem : id, title et enfants riches

Question fréquente

Élément 1
Élément 2

Autre section

Texte et mise en forme.

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

export function RichPanels() {
  return (
    <BjAccordion>
      <BjAccordionItem id="faq-1" title="Question fréquente" className="my-accordion-item">
        <ul>
          <li>Élément 1</li>
          <li>Élément 2</li>
        </ul>
      </BjAccordionItem>
      <BjAccordionItem id="faq-2" title="Autre section" className="my-accordion-item">
        <p>Texte et <strong>mise en forme</strong>.</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

Valeurs de props (exclusive)

exclusive false — plusieurs ouverts possibles

Prop : exclusive={false} ou omise

Deuxième ouvert en même temps

Même groupe

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

/** exclusive omis ou false : plusieurs ids peuvent coexister dans l’état ouvert */
export function MultiOpen() {
  return (
    <BjAccordion exclusive={false}>
      <BjAccordionItem id="x" title="Premier">
        <p>Bloc A</p>
      </BjAccordionItem>
      <BjAccordionItem id="y" title="Deuxième">
        <p>Bloc B</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

exclusive true — seul cet onglet

Prop : attribut exclusive (booléen true)

Autre (fermé)

…

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

/** exclusive true : ouvrir un item ferme les autres */
export function SingleOpen() {
  return (
    <BjAccordion exclusive>
      <BjAccordionItem id="one" title="Onglet 1">
        <p>Contenu 1</p>
      </BjAccordionItem>
      <BjAccordionItem id="two" title="Onglet 2">
        <p>Contenu 2</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

Combinaisons : exclusive + className

Panneau A

Corps A

Panneau B

Corps B

import { BjAccordion, BjAccordionItem } from '@flrxnt/dsbj/react'

export function StyledGroup() {
  return (
    <BjAccordion exclusive className="my-accordions">
      <BjAccordionItem id="a" title="Panneau A" className="my-item">
        <p>Corps A</p>
      </BjAccordionItem>
      <BjAccordionItem id="b" title="Panneau B" className="my-item">
        <p>Corps B</p>
      </BjAccordionItem>
    </BjAccordion>
  )
}

Callbacks

Aucun callback utilisateur : BjAccordionItem appelle ctx.toggle(id) au clic sur l’en-tête ; l’état vit dans BjAccordion.

Props — BjAccordion

Prop	Description
`exclusive`	Si true, un seul panneau ouvert à la fois ; si false (défaut), plusieurs peuvent rester ouverts.
`children`	Enfants : uniquement des BjAccordionItem (ou fragments contenant des items).
`className`	Classe CSS optionnelle sur le conteneur .bj-accordions.

Props — BjAccordionItem

Prop	Description
`id`	Identifiant stable de l’item (clé d’état interne, passé à toggle).
`title`	Libellé du bouton d’en-tête.
`children`	Contenu du panneau (ReactNode).
`className`	Classe CSS optionnelle sur la racine .bj-accordion.