wiki-PopUp

Ver en Git

---

PopUp

El componente PopUp permite mostrar un cuadro de diálogo modal con opciones de personalización para el contenido, botones de acción, estilos y eventos asociados. Es útil para desplegar información importante o pedir confirmación al usuario.

---

Referencia de la API

Props

Propiedad	Tipo	Requerido	Descripción
title	string	No	Título del cuadro de diálogo.
className	string	No	Clase CSS adicional para personalizar el estilo del componente.
children	ReactNode	Sí	Contenido principal del cuadro de diálogo.
cancelButtonText	string	No	Texto del botón de cancelar. Si no se especifica, no se muestra el botón.
okButtonText	string	No	Texto del botón de confirmar. Si no se especifica, no se muestra el botón.
visible	boolean	Sí	Controla si el cuadro de diálogo es visible.
onOk	() => void	No	Función que se ejecuta al hacer clic en el botón de confirmar.
onCancel	() => void	No	Función que se ejecuta al hacer clic en el botón de cancelar o en el fondo (si está habilitado).
onClose	() => void	No	Función que se ejecuta cuando el cuadro de diálogo se cierra.
onOpen	() => void	No	Función que se ejecuta cuando el cuadro de diálogo se abre.
mainExtraStyles	CSSProperties	No	Estilos adicionales para la sección principal del cuadro de diálogo.
containerStyles	CSSProperties	No	Estilos adicionales para el contenedor del cuadro de diálogo.
okButtonColor	string	No	Color de fondo del botón de confirmar.
buttonOptions	PopupButtonOptions	No	Opciones adicionales para los botones.
container	HTMLElement	No	Contenedor personalizado para el cuadro de diálogo.
aura-test	string	No	Identificador de prueba para los atributos del cuadro de diálogo.

PopupButtonOptions

Propiedad	Tipo	Requerido	Descripción
cancelOnBackdropClick	boolean	No	Si es true, cierra el cuadro de diálogo al hacer click en el fondo.

---

Ejemplo de Uso

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

export const PopUpExample = (): JSX.Element => {
 const [visible, setIsVisible] = useState(false);

 const handleOpen = () => setIsVisible(true);
 const handleClose = () => setIsVisible(false);

 return (
 <>
 <button onClick={handleOpen}>Abrir PopUp</button>

 <PopUp
 title="Confirmación"
 visible={visible}
 onCancel={handleClose}
 onOk={() => {
 alert('Confirmado');
 handleClose();
 }}
 cancelButtonText="Cancelar"
 okButtonText="Aceptar"
 >
 ¿Estás seguro de realizar esta acción?
 </PopUp>
 </>
 );
};

---

Notas

• Si no se especifican okButtonText ni cancelButtonText, el cuadro de diálogo no mostrará botones de acción.
• El evento onClose se ejecuta tanto al cerrar el cuadro de diálogo mediante el botón de cancelar como por otras acciones de cierre.