wiki-PopUp-Alert
PopUp Alert
El componente PopUpAlert es una ventana emergente utilizada para mostrar alertas con diferentes tipos de mensajes, como información, error, éxito o advertencia. Este componente permite personalizar varios aspectos del pop-up, como el texto de los botones y el estilo visual, y está basado en el componente PopUp y Icon.
Referencia de la API
| Propiedad | Tipo | Descripción |
|---|---|---|
title | string (opcional) | El título del pop-up. Si no se proporciona, el pop-up solo mostrará la descripción. |
description | string | El texto que se mostrará en el pop-up. Es obligatorio. |
cancelButtonText | string (opcional) | El texto del botón de cancelar. Si no se proporciona, no aparecerá el botón de cancelar. |
okButtonText | string (opcional) | El texto del botón de confirmación (OK). Si no se proporciona, el texto predeterminado es "OK". |
visible | boolean | Controla la visibilidad del pop-up. Si es true, el pop-up será visible. |
onOk | function (opcional) | Función que se ejecutará cuando se haga clic en el botón "OK". |
onCancel | function (opcional) | Función que se ejecutará cuando se haga clic en el botón de cancelar. |
onClose | function (opcional) | Función que se ejecutará cuando el pop-up se cierre. |
onOpen | function (opcional) | Función que se ejecutará cuando el pop-up se abra. |
type | 'information' | 'error' | 'success' | 'warning' | Tipo de alerta que se mostrará. Se puede elegir entre information, error, success o warning. |
buttonOptions | PopupButtonOptions | Opciones de configuración para los botones (OK y Cancelar). |
aura-test | string (opcional) | Atributo utilizado para pruebas. Se le asigna un valor único para facilitar la localización de elementos en pruebas automatizadas. |
Colores de alerta
El componente utiliza los siguientes colores para las alertas:
| Tipo | Color de fondo |
|---|---|
information | #a9d5f1 |
error | #FC2F0226 |
success | #18D37E26 |
warning | #FEB41F26 |
Ejemplo de uso
import { PopUpAlert } from '@auravant/ui-kit';
const handleOk = () => console.log('Ok clicked');
const handleCancel = () => console.log('Cancel clicked');
<PopUpAlert
title="Información Importante"
description="Este es un mensaje de alerta de información."
okButtonText="Aceptar"
cancelButtonText="Cancelar"
visible={true}
onOk={handleOk}
onCancel={handleCancel}
type="information"
buttonOptions={{}}
/>;