Alert

El componente Alert brinda al usuario mensajes breves sobre los procesos de la aplicación. Estos pueden ser informativos, de éxito, de advertencia o de error. El Alert tiene 4 variaciones: danger, success, warning e info. Llevan iconos y títulos predeterminados que ayudan a representar las diferentes acciones de cada tipo.

Playground

Tipo de Alert

AlertAlert List

check_circle_outline

Exito

Mensaje de alerta success.

successdangerinfowarning

Titulo del Alert

Cierre del Alert

Alert + Link

Cambiar titulo

Ruby

                  <%= alert :success do |alert| %>
                       <% alert.item  alert_message: 'Mensaje de alerta' %>                  
                  <% end %>
                

Html

  <div class="alert alert_success text-left alert-dismissible fade show alert__scroll" role="alert">
    <div class="alert_container d-flex">
      <div class="alert_container__icon">
        <span class=" material-icons " aria-hidden="true">check_circle_outline</span>
      </div>
      <div class="alert_container__content">
      <h4 class="alert_container__title">Exito</h4>
        Mensaje de alerta success. 
      </div>
    </div> 
    <button class="close alert_close" aria-label="Close">
      <span aria-hidden="true">
        <span class=" material-icons" aria-hidden="true">close</span>
      </span>
    </button>
  </div>
                

Groovy

  <link href="<g:resource dir='css' />/components/components.css" rel="stylesheet">
  <g:alertComponent
      type="success"
      title="Exito"
      message="Mensaje de alerta success"
      closeAlert="true"
  />
                

Lista de parámetros

Ruby

Parámetro

Tipo

Detalle

alert_color	String	Para definir el color que tendrá el alert, soporta los siguientes (danger | success | warning | info)
alert_title	String	Para agregar un título al alert, ya viene con un título por defecto, pero al agregar un texto diferente en este parámetro lo reemplaza
alert_icon	Boolean	Por default está en true y muestra el icono correspondiente a cada alert
alert_message	String	Define el mensaje que tendrá el alert
alert_close	Boolean	Por default está en true y muestra el botón para cerrar el alert, se puede quitar dejando el parámetro en false
alert_message_strong	String	Se puede mostrar un texto con negrita (destacado) al comienzo del mensaje
alert_list	Boolean	Este parámetro por defecto está en false, muestra el contenido en una lista y no muestra título ni icono

Groovy

Parámetro

Tipo

Detalle

id	String	Determina el ID dentro del DOM del componente
class	String | primary | danger	Determina el tipo de chip y la clase dentro del DOM
title	String	Determina el titulo de la alerta
message	String	Determina el mensaje de la alerta
type	success | danger | info | warning	Determina el tipo de alerta
closeAlert	Boolean	Por default está en false y se usa para mostrar el botón que permite cerrar el alert

Anatomía del Alert

1. Contenedor

El contenedor principal contiene todos los elementos que construyen el componente Alert.

2. Icono

El Alert siempre lleva ícono, a excepción del Alert List.

3. Header [opcional]

Es el título de la alerta.

4. Body

Mensaje o descripción de la alerta.

5. Acciones [opcional]

Un alert puede llevar una acción para cerrarla “ x “

---

Anatomía del Alert List

El Alert List se utiliza para enlistar información, por ejemplo, errores que hayan ocurrido tras una acción y que el usuario debería corregir antes de continuar.

1. Contenedor

El contenedor principal contiene todos los elementos que construyen el componente Alert.

2. Lista con viñetas

La lista con viñetas se usa para presentar información de manera clara y organizada. Se compone de texto separado por viñetas o marcadores, en nuestro caso usamos puntos. Ayuda al usuario a identificar rápidamente los elementos y leerlos fácilmente.

3. Body

Mensaje o descripción de la alerta.

---

Variaciones

Alert Danger

Los Alert Danger son para indicar acciones fallidas, datos por completar, o errores de validación y similares.

Alert Warning

Los Alert Warning indican alguna información que el usuario debería tener en consideración para sus procesos

Alert Info

Los Alert Info indican alguna información relevante, pero que no necesariamente afectará directamente a las acciones que el usuario realices

Alert Success

Los Alert Success confirman al usuario que la acción que realizó se ha concretado

¿Cuándo usarlos?

Los Alerts pueden ser usados en dos escenarios:

1. Luego de una acción manual que realice el usuario, como eliminar un elemento, crear uno nuevo, editar, etc, como feedback del sistema sobre el estado del proceso realizado.

Ejemplo:


2. De forma “preventiva”, sin necesidad de que se realice una acción antes, para poder informar al usuario sobre algo que deba saber o tener en consideración.

¿Dónde se aplica?

Si la información es general y aplica a toda la vista, entonces debe ir en la parte superior, por encima del Outerbox. Si se requiere mostrar más de 1 Alert, debe ir apilándose siempre por fuera del Outerbox.

Si va dentro del Aside, debe ir siempre en la parte superior de éste para mantener la consistencia.

Dentro de modales también debe ir en la parte superior.

Si la información es sobre una sección o un elemento particular, debe ir dentro de éste.

Ejemplo: Dentro de cada proceso se debería indicar el error, de modo que se entienda que es en relación solo a esa sección

Igual que el ejemplo anterior, aquí hay una información específica del tab Talento, por lo tanto debe ir dentro del Outerbox, y debajo de los tabs.

Uso Incorrecto

El Alert siempre debe ocupar todo el ancho de su contenedor.