BjTab / BjTabPanel

BjTab reçoit tabs (libellés), activeIndex et onChange. Chaque BjTabPanel reçoit active (booléen) : un seul panneau actif à la fois. Clavier : flèches, Home, End sur les onglets.

Utilisation

import { useState } from 'react'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/react'

export default function App() {
  const [active, setActive] = useState(0)

  return (
    <BjTab
      tabs={['Général', 'Sécurité', 'Notifications']}
      activeIndex={active}
      onChange={setActive}
    >
      <BjTabPanel active={active === 0}>
        <p>Contenu général.</p>
      </BjTabPanel>
      <BjTabPanel active={active === 1}>
        <p>Paramètres de sécurité.</p>
      </BjTabPanel>
      <BjTabPanel active={active === 2}>
        <p>Préférences de notifications.</p>
      </BjTabPanel>
    </BjTab>
  )
}

Aperçu

Contenu général.

Valeurs : tous les index de tabs

Chaque index i du tableau tabs correspond à un BjTabPanel avec la prop booléenne active={activeIndex === i} (ou active={active === i} si vous nommez le state ainsi).

import { useState } from 'react'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/react'

export default function App() {
  const [active, setActive] = useState(0)

  return (
    <BjTab
      tabs={['Général', 'Sécurité', 'Notifications']}
      activeIndex={active}
      onChange={setActive}
    >
      <BjTabPanel active={active === 0}>
        <p>Contenu général.</p>
      </BjTabPanel>
      <BjTabPanel active={active === 1}>
        <p>Paramètres de sécurité.</p>
      </BjTabPanel>
      <BjTabPanel active={active === 2}>
        <p>Préférences de notifications.</p>
      </BjTabPanel>
    </BjTab>
  )
}

Callback onChange

import { useCallback, useState } from 'react'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/react'

export function TabsWithLogging() {
  const [active, setActive] = useState(0)
  const handleChange = useCallback((index: number) => {
    console.log('tab', index)
    setActive(index)
  }, [])

  return (
    <BjTab tabs={['A', 'B']} activeIndex={active} onChange={handleChange}>
      <BjTabPanel active={active === 0}><p>Onglet A</p></BjTabPanel>
      <BjTabPanel active={active === 1}><p>Onglet B</p></BjTabPanel>
    </BjTab>
  )
}

Enfants : panneaux et contenu riche

Point 1
Point 2

import { useState } from 'react'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/react'

export function RichTabs() {
  const [active, setActive] = useState(0)
  return (
    <BjTab tabs={['Résumé', 'Détails']} activeIndex={active} onChange={setActive}>
      <BjTabPanel active={active === 0}>
        <ul><li>Point 1</li><li>Point 2</li></ul>
      </BjTabPanel>
      <BjTabPanel active={active === 1}>
        <p>Texte et <strong>gras</strong>, <a href="#lien">lien</a>.</p>
      </BjTabPanel>
    </BjTab>
  )
}

Combinaison : className sur tablist et panneau

Panneau avec className

import { useState } from 'react'
import { BjTab, BjTabPanel } from '@flrxnt/dsbj/react'

export function StyledTabs() {
  const [active, setActive] = useState(0)
  return (
    <BjTab className="my-tabs" tabs={['Un', 'Deux']} activeIndex={active} onChange={setActive}>
      <BjTabPanel active={active === 0} className="my-panel">
        <p>Panneau 1</p>
      </BjTabPanel>
      <BjTabPanel active={active === 1} className="my-panel">
        <p>Panneau 2</p>
      </BjTabPanel>
    </BjTab>
  )
}

Clavier

ArrowLeft / ArrowRight changent l’onglet et déplacent le focus ; Home / End vont au premier / dernier onglet.

Props — BjTab

Prop	Description
`tabs`	Tableau des libellés affichés sur les boutons role="tab".
`activeIndex`	Index (0-based) de l’onglet actif ; doit correspondre à un seul BjTabPanel avec active true.
`onChange`	(index: number) => void — appelé au clic et lors de la navigation clavier.
`children`	Enfants : typiquement un BjTabPanel par entrée de tabs, dans le même ordre.
`className`	Classe sur la racine .bj-tabs.

Props — BjTabPanel

Prop	Description
`active`	Si true, le panneau est visible (display block) ; sinon masqué.
`children`	Contenu du panneau (ReactNode).
`className`	Classe sur .bj-tabs__panel.