Alerts

Inline

Base

Usamos los Messages para mostrar información dentro del flujo, estas son alertas que advierten o dan contexto de una acción o flujo.

Messages

EB Design System

Messages

Pincali Design System

Alerta máxima

Se compran colchones, tambores, refrigeradores, estufas, lavadoras, microondas o algo de fierro viejo que vendan.

Html

            
              <div class="divider --lg"></div>

Color

Code

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

            
              <%= render 'shared/eb_message', class: '--white', title: 'Title', subtitle: 'Body text' %>

            
              <%= render 'shared/eb_message', title: 'Title', subtitle: 'Body text' %>

            
              <%= render 'shared/eb_message', class: '--primary', title: 'Title', subtitle: 'Body text' %>

            
              <%= render 'shared/eb_message', class: '--warning', title: 'Title', subtitle: 'Body text' %>

            
              <%= render 'shared/eb_message', class: '--success', title: 'Title', subtitle: 'Body text' %>

            
              <%= render 'shared/eb_message', class: '--danger', title: 'Title', subtitle: 'Body text' %>

Local assigns	Descripción	Opcional
class:	Aquí recibe cualquier clase pero principalmente asignamos el tipo de alerta: --white, --success, --danger o --warning. Si no asignamos un estados, por defecto viene en gris.
Title:	Puede recibir cualquier tipo de texto
Subtitle:	Puede recibir cualquier tipo de texto
yield	Como yield podemos agregar los cta necesarios

Con acciones

Podemos agregar botones a los eb-message usando el espacio asignado para el yield.

Code

Las hormigas no duermen. Al menos, no demasiado

Suelen tomar siestas de algo más de un minuto, que sumadas nos dan un total de unas 4 o 5 horas de sueño al día.

Button

          
          <%= render 'shared/eb_message', title: 'Title', subtitle: 'Body text' do %>
            <%= link_to 'Button', '#', class: 'button --outline' %>
          <% end %>

Flash

Toast

Los Toast dan feedback al usuario de alguna acción o estado. Este componente es sencillo en su estructura y a diferencia de los mensajes inline que son persistentes, éste funciona como una notificación autodescartable y no forma parte del flujo, por eso es un elemento flotante.

Toast

Shared Design System

Mensaje exitoso

Mobile Tablet Desktop

Nota Los toast cuenta con una propiedad CSS personalizada, --toast-position-bottom, que permite configurar su posición en mobile. Esto nos ayuda a situar el elemento en lugares donde no interfiera con la navegación.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor. Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor. Action

          
            def metelebackend
              flash[:notice] = 'Dale que me cago quemando'
              flash[:warning] = '¡Y sácame foto!'
              flash[:error] = 'Que pelotuda que sos'
            end

La estructura del eb-toast se recicla en todos los layouts. Podemos simplemente crear el mensaje usando flash[:notice], flash[:warning] o flash[:error].
El mensaje :notice se autodescarta luego de 2.5s y el de :error o :warning a los 8.5s, a menos que el toast tenga un botón para cerrar.

Estado	Variable	Flash
Success	--success	flash[:notice]
Warning	--warning	flash[:warning]
Error	--error	flash[:error]

Nota Si no declaras una clase CSS de estado, el toast se mostrará sin icono. Solo se puede lograr desde toast hechos con JavaScript.

Nota En desktop, los toast tienen un ancho máximo de 30rem.

Toast Hero

Versión especial de los toast para mostrar anuncios o mensajes persistentes.

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

          
           <div class="eb-toast" data-toast>
              <div class="eb-toast__container --hero">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                <%= content_tag :div, class:'eb-toast__close' do %>
                  <%= icon(:far, 'xmark') %>
                <% end %>
              </div>
            </div>

Puedes incluir clases CSS para alternar entre --success, --warning o --error.

Nota Los toast hero pueden llevar imágenes