Boîte de dialogue

Informe l'utilisateur et porte les actions associées tout en préservant l'état de la page courante.

Utilisation de base

Boîte de dialogue contrôlée

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

export default function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <LhButton type="primary" onClick={() => setOpen(true)}>
        Ouvrir la boîte de dialogue
      </LhButton>
      <LhDialog
        open={open}
        title="Information"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>Annuler</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>Confirmer</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>Ceci est une boîte de dialogue contrôlée.</p>
      </LhDialog>
    </>
  )
}

Dialog Props

Prop	Description	Type	Options	Valeur par défaut
open	Ouvert ou non (purement contrôlé)	boolean	—	false
title	Titre (sert également de repli aria-label en l'absence de header)	string	—	—
width	Largeur	string | number	—	—
fullscreen	Plein écran	boolean	—	false
showClose	Afficher le bouton de fermeture	boolean	—	true
closeOnClickModal	Fermer au clic sur le masque	boolean	—	true
closeOnPressEscape	Fermer à l'appui sur Échap	boolean	—	true
draggable	Déplaçable (glisser la barre de titre)	boolean	—	false
center	Titre et pied centrés	boolean	—	false
position	Décalage de positionnement personnalisé	{ top?: string; left?: string }	—	—
lockScroll	Verrouiller le défilement de body à l'ouverture	boolean	—	true
beforeClose	Interception avant fermeture (ne se ferme pas en cas de retour false / Promise<false>)	() => boolean | Promise<boolean>	—	—
top	Distance par rapport au sommet	string	—	—
zIndex	Niveau z (par défaut, allocation croissante via useLhZIndex)	number	—	—
header	En-tête personnalisé (remplace title)	ReactNode	—	—
footer	Pied personnalisé	ReactNode	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Dialog

Événement	Description	Signature du rappel	Équivalent Vue
onClose	Demande de fermeture (masque / Échap / bouton de fermeture ; non appelé après interception par beforeClose)	() => void	update:modelValue
onOpen	Déclenché à l'ouverture (DOM monté)	() => void	@open
onOpened	Déclenché à la fin de la transition d'ouverture	() => void	@opened
onCloseStart	Déclenché au début de la transition de fermeture	() => void	@close
onClosed	Déclenché à la fin de la transition de fermeture (DOM démonté)	() => void	@closed

ref

forwardRef<HTMLDivElement>. LhDialogInstance n'expose actuellement pas de méthode impérative.

Sémantique purement contrôlée

Contrairement à plus, le Dialog de cette bibliothèque n'a pas d'état intermédiaire isVisible interne : open est entièrement détenu par un état externe, et tout chemin de fermeture ne fait qu'appeler onClose. Voir le Guide de migration.

Échap avec plusieurs couches

useLhOverlayStack maintient une pile d'ouverture : Échap ne ferme que la couche supérieure, évitant qu'une seule pression ne ferme toutes les couches.

Styles

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