Accordion ​

Composant de contenu repliable/dépliable. Prend un tableau items et expose un slot nommé #[item.id] pour le contenu de chaque panneau.

Démo de base ​

vue
<script setup>
const items = [
  { id: 'kyb',  title: 'Informations générales', content: 'Raison sociale, SIREN, forme juridique.' },
  { id: 'docs', title: 'Documents KYB',           content: 'Kbis, pièce d\'identité dirigeant.' },
  { id: 'oidc', title: 'Configuration OIDC',      content: 'Scopes, claims, redirect URIs.' },
]
</script>

<BcAccordion :items="items" />

Avec contenu personnalisé (slot nommé) ​

vue
<BcAccordion :items="[
  { id: 'panel-a', title: 'Section personnalisée' },
  { id: 'panel-b', title: 'Section standard', content: 'Contenu texte.' },
]">
  <!-- slot nommé par l'ID de l'item -->
  <template #panel-a>
    <div style="padding: 12px 16px;">
      <BcButton size="sm" variant="primary">Action</BcButton>
    </div>
  </template>
</BcAccordion>

Plusieurs panneaux ouverts simultanément ​

vue
<BcAccordion :items="items" :multiple="true" />

Props ​

PropTypeDéfautDescription
itemsAccordionItem[][]Tableau des panneaux
flushbooleanfalseSans bordure extérieure
multiplebooleanfalsePlusieurs panneaux ouverts simultanément

Type AccordionItem ​

ts
interface AccordionItem {
  id: string       // identifiant unique — sert aussi de nom de slot
  title: string    // titre du panneau
  content?: string // contenu texte (alternatif au slot nommé)
}

Slots ​

SlotPropsDescription
#[item.id]{ item }Contenu personnalisé pour l'item ayant cet id