Tiroir

Panneau coulissant depuis le bord de l'écran, souvent utilisé pour la consultation de détails, la saisie de formulaires et autres scénarios nécessitant un espace d'affichage plus important. Différence avec le Dialog : affichage bord à bord, coulissement directionnel, et la taille du panneau ne s'applique qu'à un seul côté (largeur ou hauteur).

Utilisation de base

Les quatre directions et la taille personnalisée

import { useState } from 'react'
import { LhButton, LhDrawer } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <LhButton onClick={() => setOpen(true)}>Ouvrir le tiroir</LhButton>
      <LhDrawer title="Titre du tiroir" open={open} onClose={() => setOpen(false)}>
        Contenu du tiroir
      </LhDrawer>
    </>
  )
}

Drawer Props

Prop	Description	Type	Options	Valeur par défaut
children	Contenu principal	ReactNode	—	—
open	Affiché ou non (contrôlé)	boolean	—	false
title	Titre	ReactNode	—	—
direction	Direction de coulissement	'right' | 'left' | 'top' | 'bottom'	—	'right'
size	Taille du panneau (un nombre devient px ; une chaîne peut être un pourcentage)	string | number	—	'30%'
showClose	Afficher ou non le bouton de fermeture	boolean	—	true
maskClosable	Fermer ou non au clic sur le masque	boolean	—	false
closeOnEsc	Fermer ou non à l'appui sur Échap	boolean	—	true
lockScroll	Verrouiller ou non le défilement de body (verrouillage assorti du piégeage du focus)	boolean	—	true
beforeClose	Interception avant fermeture : ne continue qu'à l'appel de done	(done: () => void) => void	—	—
zIndex	z-index (en son absence, chaîne d'incrémentation globale)	number	—	—
header	Contenu de l'en-tête (remplace la barre de titre par défaut)	ReactNode	—	—
footer	Contenu du pied (zone des boutons)	ReactNode	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page (appliqué au panneau)	SxProps	—	—

Événements de Drawer

Événement	Description	Signature du rappel	Équivalent Vue
onClose	Demande de fermeture (masque / Échap / bouton de fermeture), déclenchée après interception par beforeClose	() => void	update:modelValue / close
onOpen	Déclenché à l'ouverture (après montage du DOM, avant l'animation d'entrée)	() => void	open
onOpened	Fin de l'animation d'ouverture	() => void	opened
onCloseStart	Demande de fermeture acceptée, début de l'animation de sortie	() => void	—
onClosed	Fin de l'animation de fermeture, après démontage du DOM	() => void	closed

ref

forwardRef<LhDrawerInstance>. LhDrawerInstance expose close() (passe par l'interception beforeClose) et isOpen.

Le masque n'est pas cliquable par défaut

maskClosable vaut false par défaut (la valeur par défaut de canDrawerClose dans core refuse le clic sur le masque) afin d'éviter les manipulations involontaires ; closeOnClickModal de plus vaut true par défaut : il faut le déclarer explicitement lors d'une migration.

Piégeage du focus

Le focus n'est piégé (shouldDrawerTrapFocus) que lorsque lockScroll est activé : un tiroir sert souvent de panneau léger, et sans verrouillage du défilement on conserve la séquence de Tab du formulaire en arrière-plan. Le focus est rendu à la fermeture.

Direction de la taille

Un size numérique est normalisé en px ; pour les directions gauche / droite il s'applique à la width du panneau, pour les directions haut / bas à sa height.

Styles

import '@lh-ui/react/style/drawer'