Diálogo

Informa al usuario y acoge las operaciones relacionadas sin perder el estado actual de la página.

Uso básico

Diálogo controlado

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)}>
        Abrir diálogo
      </LhButton>
      <LhDialog
        open={open}
        title="Aviso"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>Cancelar</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>Aceptar</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>Esto es un diálogo controlado.</p>
      </LhDialog>
    </>
  )
}

Dialog Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
open	Si está abierto (puramente controlado)	boolean	—	false
title	Título (también sirve como respaldo de aria-label cuando no hay header)	string	—	—
width	Ancho	string | number	—	—
fullscreen	Pantalla completa	boolean	—	false
showClose	Muestra el botón de cierre	boolean	—	true
closeOnClickModal	Cierra al hacer clic en la máscara	boolean	—	true
closeOnPressEscape	Cierra al pulsar Esc	boolean	—	true
draggable	Se puede arrastrar (de la barra de título)	boolean	—	false
center	Título y pie centrados	boolean	—	false
position	Desplazamiento de posicionamiento personalizado	{ top?: string; left?: string }	—	—
lockScroll	Bloquea el desplazamiento de body al abrir	boolean	—	true
beforeClose	Intercepta antes de cerrar (si devuelve false / Promise<false>, no se cierra)	() => boolean | Promise<boolean>	—	—
top	Distancia respecto a la parte superior	string	—	—
zIndex	Nivel de apilamiento (por defecto lo asigna de forma creciente useLhZIndex)	number	—	—
header	Cabecera personalizada (sustituye a title)	ReactNode	—	—
footer	Pie personalizado	ReactNode	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout	SxProps	—	—

Eventos de Dialog

Evento	Descripción	Firma del callback	Equivalente en Vue
onClose	Petición de cierre (máscara / Esc / botón de cierre; no se llama si beforeClose intercepta)	() => void	update:modelValue
onOpen	Se dispara al instante de abrir (el DOM ya está montado)	() => void	@open
onOpened	Se dispara al terminar la transición de apertura	() => void	@opened
onCloseStart	Se dispara al empezar la transición de cierre	() => void	@close
onClosed	Se dispara al terminar la transición de cierre (el DOM se desmonta)	() => void	@closed

ref

forwardRef<HTMLDivElement>. LhDialogInstance no expone métodos imperativos por ahora.

Semántica puramente controlada

A diferencia de plus, el Dialog de esta biblioteca no tiene un estado intermedio interno isVisible: open lo mantiene por completo el estado externo, y cualquier ruta de cierre solo invoca onClose. Consulta la Guía de migración.

Esc con varias capas superpuestas

useLhOverlayStack mantiene una pila con el orden de apertura: Esc solo cierra la capa superior, evitando que una sola pulsación cierre todas las capas.

Estilos

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