Nexus – Elemento: Alert

¿Qué es?

Alert es un componente de tipo Display. Muestra un mensaje de aviso o notificación con distintos niveles de severidad, cada uno con su propio color e ícono. Al arrastrarlo al lienzo viene con un mensaje de ejemplo precargado (“Heads up / Something changed in your dashboard”).

Propiedades

Al seleccionar Alert en el lienzo, el panel derecho muestra “Properties of Alert” con las siguientes opciones:

  • Component ID: identificador único del componente, autogenerado (ej. alt_ba011e13).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
  • Title: título del mensaje de alerta (ej. “Heads up”).
  • Message: texto del cuerpo del mensaje (ej. “Something changed in your dashboard.”).
  • Variant: menú desplegable que define el tipo/severidad de la alerta, cambiando color e ícono. Opciones:

    • Info: alerta informativa, en color azul.
    • Success: alerta de éxito, en color verde.
    • Warning: alerta de advertencia, en color amarillo/naranja.
    • Danger: alerta de error/peligro, en color rojo.

  • Dismissible: casilla que habilita un botón (ícono ✕) para que el usuario pueda cerrar la alerta manualmente.
  • Show: casilla que controla si la alerta se muestra o no.
  • Style → Custom Class: campo para asignar una clase CSS personalizada.
  • Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
  • Delete Component: elimina el componente del lienzo.
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Se puede usar Variant para comunicar distintos tipos de mensajes según el contexto: por ejemplo, Success al confirmar que una acción se completó correctamente, Warning para advertir sobre algo que requiere atención, o Danger para señalar un error. Con Dismissible activado, el usuario puede cerrar la alerta haciendo clic en el ícono ✕; si se desactiva, la alerta permanece visible de forma fija mientras Show esté activo.