wiki-Modal

Ver en Git

---

Modal

El componente Modal es una ventana modal flexible y personalizable que permite mostrar contenido superpuesto en la interfaz de usuario. Incluye subcomponentes para estructurar el contenido: Title, Body y Footer.

Referencia de la API

Modal Props

Propiedad	Tipo	Descripción	Opcional	Valores posibles
className	string	Clases CSS adicionales para el contenido principal del modal.	Sí	-
open	boolean	Controla si el modal está visible.	Sí	true, false
wrapperClassName	string	Clases CSS adicionales para el contenedor del modal.	Sí	-
children	ReactNode	Contenido del modal, que puede incluir los subcomponentes Title, Body y Footer.	No	-
onCancel	() => void	Función que se ejecuta al cerrar el modal.	Sí	-
maskClosable	boolean	Determina si el modal se cierra al hacer clic fuera de él.	Sí	true, false
closeIcon	boolean	Muestra o no el ícono para cerrar el modal.	Sí	true, false
centered	boolean	Centra el modal verticalmente en la pantalla.	Sí	true, false

Title Props

Propiedad	Tipo	Descripción	Opcional	Valores posibles
className	string	Clases CSS adicionales para el título.	Sí	-
children	ReactNode	Contenido del título.	Sí	-
text	string	Texto para el título.	Sí	-

Body Props

Propiedad	Tipo	Descripción	Opcional	Valores posibles
className	string	Clases CSS adicionales para el cuerpo.	Sí	-
children	ReactNode	Contenido del cuerpo.	Sí	-
styles	CSSProperties	Estilos CSS en línea para el cuerpo.	Sí	-

Footer Props

Propiedad	Tipo	Descripción	Opcional	Valores posibles
className	string	Clases CSS adicionales para el pie.	Sí	-
children	ReactNode	Contenido del pie.	Sí	-
styles	CSSProperties	Estilos CSS en línea para el pie.	Sí	-

Ejemplo de uso

Modal básico

import { useState } from 'react';
import { Modal } from '@auravant/ui-kit';

export const BasicModalExample = () => {
 const [isOpen, setIsOpen] = useState(false);

 return (
 <>
 <button onClick={() => setIsOpen(true)}>Abrir Modal</button>

 <Modal open={isOpen} onCancel={() => setIsOpen(false)}>
 <Modal.Title text="Título Modal" />
 <Modal.Body>
 <p>Contenido modal.</p>
 </Modal.Body>
 <Modal.Footer>
 <button onClick={() => setIsOpen(false)}>Cerrar</button>
 </Modal.Footer>
 </Modal>
 </>
 );
};

Modal centrado con máscara no cerrable

import { useState } from 'react';
import { Modal } from '@auravant/ui-kit';

export const CenteredModalExample = () => {
 const [isOpen, setIsOpen] = useState(false);

 return (
 <>
 <button onClick={() => setIsOpen(true)}>Abrir Modal Centrado</button>

 <Modal
 open={isOpen}
 centered
 maskClosable={false}
 onCancel={() => setIsOpen(false)}
 >
 <Modal.Title>
 <h2>Modal Centrado</h2>
 </Modal.Title>
 <Modal.Body>
 <p>Centrado y no se puede cerrar haciendo click en la máscara.</p>
 </Modal.Body>
 <Modal.Footer>
 <button onClick={() => setIsOpen(false)}>Cerrar</button>
 </Modal.Footer>
 </Modal>
 </>
 );
};

Notas

• Los subcomponentes Title, Body y Footer ayudan a estructurar y estilizar el contenido del modal.
• El z-index del modal se ajusta automáticamente para evitar superposición incorrecta con otros elementos.