Cajón

Panel de cajón que se desliza desde el borde de la pantalla; se usa a menudo para vista de detalles, rellenado de formularios y otros escenarios que necesitan un espacio de visualización mayor. La diferencia respecto a Dialog: se muestra pegado al borde, se desliza en una dirección y el tamaño del panel afecta a un solo lado (ancho o alto).

Uso básico

Cuatro direcciones y tamaño personalizado

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)}>Abrir cajón</LhButton>
      <LhDrawer title="Título del cajón" open={open} onClose={() => setOpen(false)}>
        Contenido del cajón
      </LhDrawer>
    </>
  )
}

Drawer Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
children	Contenido principal	ReactNode	—	—
open	Si se muestra (controlado)	boolean	—	false
title	Título	ReactNode	—	—
direction	Dirección de salida	'right' | 'left' | 'top' | 'bottom'	—	'right'
size	Tamaño del panel (número -> px; la cadena admite porcentajes)	string | number	—	'30%'
showClose	Si se muestra el botón de cierre	boolean	—	true
maskClosable	Si se cierra al hacer clic en la máscara	boolean	—	false
closeOnEsc	Si se cierra al pulsar Esc	boolean	—	true
lockScroll	Si se bloquea el desplazamiento de body (al bloquear, también se atrapa el foco)	boolean	—	true
beforeClose	Intercepta antes de cerrar; continúa solo al invocar done	(done: () => void) => void	—	—
zIndex	z-index (si no se pasa, sigue el sistema global de incremento)	number	—	—
header	Contenido de la cabecera (sustituye a la barra de título por defecto)	ReactNode	—	—
footer	Contenido del pie (zona de botones)	ReactNode	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout (actúan sobre el panel)	SxProps	—	—

Eventos de Drawer

Evento	Descripción	Firma del callback	Equivalente en Vue
onClose	Petición de cierre (máscara / Esc / botón de cierre; se dispara tras el filtro de beforeClose)	() => void	update:modelValue / close
onOpen	Se dispara al abrir (tras montar el DOM, antes de la animación de entrada)	() => void	open
onOpened	Fin de la animación de apertura	() => void	opened
onCloseStart	La petición de cierre se acepta y empieza la animación de salida	() => void	—
onClosed	Fin de la animación de cierre, tras desmontar el DOM	() => void	closed

ref

forwardRef<LhDrawerInstance>. LhDrawerInstance expone close() (pasa por el filtro de beforeClose) e isOpen.

La máscara no es cliclable por defecto

maskClosable es false por defecto (canDrawerClose del núcleo rechaza por defecto el clic en la máscara), para evitar toques accidentales; en plus closeOnClickModal es true por defecto, por lo que al migrar hay que declararlo explícitamente.

Captura de foco

El foco solo se atrapa cuando lockScroll está activado (shouldDrawerTrapFocus): el cajón suele ser un panel ligero y, si no se bloquea el desplazamiento, se conserva la secuencia de Tab del formulario que queda detrás. Al cerrar, el foco se devuelve.

Tamaño y dirección

size, cuando es un número, se normaliza a px; para las direcciones izquierda/derecha afecta al width del panel y para arriba/abajo al height.

Estilos

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