BjTab

Onglets Vue : la prop tabs fournit les libellés ; chaque BjTabPanel correspond à un panneau dans l’ordre d’apparition. v-model lie l’index actif (0-based).

Utilisation

<script setup>
import { ref } from 'vue'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/vue'

const active = ref(0)
</script>

<template>
  <BjTab v-model="active" :tabs="['Général', 'Pièces']">
    <BjTabPanel>
      <p>Contenu de l’onglet général.</p>
    </BjTabPanel>
    <BjTabPanel>
      <p>Liste des pièces jointes.</p>
    </BjTabPanel>
  </BjTab>
</template>

Aperçu (HTML)

Contenu de l’onglet général.

Liste des pièces jointes.

Aperçu : onglet actif (HTML)

Panneau visible (équivalent index 1 en Vue).

modelValue : index initial et liaison

<script setup>
import { ref } from 'vue'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/vue'

const idx = ref(2)
</script>

<template>
  <!-- Index initial 2 (troisième onglet) -->
  <BjTab v-model="idx" :tabs="['A', 'B', 'C', 'D']">
    <BjTabPanel><p>Onglet A</p></BjTabPanel>
    <BjTabPanel><p>Onglet B</p></BjTabPanel>
    <BjTabPanel><p>Onglet C (actif au montage)</p></BjTabPanel>
    <BjTabPanel><p>Onglet D</p></BjTabPanel>
  </BjTab>
</template>

tabs : longueurs et libellés

<!-- Deux onglets -->
<BjTab :tabs="['Résumé', 'Détails']">...</BjTab>

<!-- Un seul onglet (cas limite) -->
<BjTab :tabs="['Unique']">
  <BjTabPanel>Contenu unique</BjTabPanel>
</BjTab>

Combinaisons tabs × panneaux × index initial

Le nombre de chaînes dans tabs doit égaler le nombre de BjTabPanel ; l’index v-model doit rester entre 0 et tabs.length - 1.

<!-- 2 onglets, premier actif -->
<BjTab v-model="i" :tabs="['Résumé', 'Détails']">
  <BjTabPanel><p>Résumé</p></BjTabPanel>
  <BjTabPanel><p>Détails</p></BjTabPanel>
</BjTab>

<!-- 4 onglets, dernier actif au montage -->
<BjTab v-model="j" :tabs="['A', 'B', 'C', 'D']">
  <BjTabPanel>…</BjTabPanel>
  <BjTabPanel>…</BjTabPanel>
  <BjTabPanel>…</BjTabPanel>
  <BjTabPanel>…</BjTabPanel>
</BjTab>
<!-- script: const j = ref(3) -->

Clavier (flèches, Home, End)

Sur un onglet focalisé : ← → changent l’onglet (boucle), Home va au premier, End au dernier ; le focus suit l’onglet activé.

Slots : contenu riche dans BjTabPanel

Chaque panneau accepte tout marquage (listes, formulaires, composants) dans son slot par défaut.

<BjTab v-model="t" :tabs="['Liste', 'Formulaire']">
  <BjTabPanel>
    <ul class="bj-list">
      <li>Élément</li>
    </ul>
  </BjTabPanel>
  <BjTabPanel>
    <label class="bj-label">Nom</label>
    <input class="bj-input" type="text" />
  </BjTabPanel>
</BjTab>

Slots

Slot	Description
`BjTab (default)`	Les BjTabPanel enfants, dans le même ordre que tabs[].

Émission

Événement	Description
`update:modelValue`	update:modelValue(index) lors d’un clic ou navigation clavier (flèches, Home, End).

<script setup>
import { ref } from 'vue'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/vue'

const active = ref(0)
</script>

<template>
  <BjTab
    v-model="active"
    :tabs="['Un', 'Deux']"
    @update:modelValue="(i) => console.log('Onglet', i)"
  >
    <BjTabPanel>…</BjTabPanel>
    <BjTabPanel>…</BjTabPanel>
  </BjTab>
</template>

Props — BjTab

Prop	Description
`modelValue`	Index de l’onglet actif (v-model), défaut 0.
`tabs`	Tableau de chaînes : une entrée par onglet, dans l’ordre des BjTabPanel.

BjTabPanel

Prop	Description
`(default slot)`	Contenu du panneau (slot par défaut). Un panneau par item de tabs.