BjDrawer — React
Composant React pour le tiroir latéral DSBJ, rendu via portal avec gestion du focus et de la touche Escape.
Utilisation
import { useState } from 'react'
import { BjDrawer } from '@flrxnt/dsbj/react'
function App() {
const [open, setOpen] = useState(false)
return (
<>
<button className="bj-btn" onClick={() => setOpen(true)}>
Ouvrir le tiroir
</button>
<BjDrawer
open={open}
onClose={() => setOpen(false)}
title="Mon tiroir"
footer={
<>
<button className="bj-btn bj-btn--tertiary" onClick={() => setOpen(false)}>
Annuler
</button>
<button className="bj-btn">Valider</button>
</>
}
>
<p>Contenu du tiroir.</p>
</BjDrawer>
</>
)
}Aperçu interactif
Props
| Classe | Description |
|---|---|
open | Contrôle l'ouverture du tiroir. |
onClose | Callback appelé à la fermeture. |
position | Position : "left" (défaut) ou "right". |
size | Taille : "default", "sm", "lg" ou "full". |
title | Titre affiché dans l'en-tête. |
footer | ReactNode affiché dans le pied du tiroir. |
Accessibilité
Le composant utilise
role="dialog" et aria-modal="true". Le focus est piégé dans le tiroir. La touche Escape ferme le tiroir.