Avisos

Estado: Estable

Pila de avisos

Los avisos se apilan como en Sonner: el más nuevo al frente y los anteriores asomando detrás. Al pasar el cursor se despliegan en lista y el tiempo se detiene; se van solos, con la ✕ o arrastrándolos de lado. Un aviso puede llevar su acción (Deshacer) y llegar desde JS, desde un botón o desde el servidor con un Turbo Stream.

Clase reservada

Reformer · martes 8:00

app/views/… (la demo de arriba)

<%= render Ui::ToasterComponent.new(position: :inline, id: "toaster-demo", class: "flex flex-wrap items-center justify-center gap-2.5",
                                    toasts: [ { title: "Clase reservada", description: "Reformer · martes 8:00", tone: :success, duration: 0 } ]) do %>
  <%= render Ui::ButtonComponent.new(variant: :secondary, size: :sm, data: {
        action: "toaster#show",
        toaster_title_param: "Reserva cancelada",
        toaster_description_param: "Vinyasa Flow · lunes 7:00. Te devolvimos 1 crédito.",
        toaster_action_label_param: "Deshacer",
        toaster_action_name_param: "deshacer-cancelacion",
        toaster_action_done_param: "Reserva restaurada"
      }) do %>Cancelar reserva<% end %>
  <%= render Ui::ButtonComponent.new(size: :sm, data: {
        action: "toaster#show",
        toaster_title_param: "Cambios guardados",
        toaster_description_param: "Tu perfil y tus preferencias de aviso.",
        toaster_tone_param: "success"
      }) do %>Guardar cambios<% end %>
<% end %>

Qué hace

  • JS: window.dispatchEvent(new CustomEvent("eui:toast", { detail: { title, description, tone, action: { label, name, done } } })).
  • Botones: data-action="toaster#show" con data-toaster-title-param, -tone-param, -action-label-param…
  • Servidor: turbo_stream.append "eui-toasts", Ui::ToasterComponent::Toast.new(title: …, tone: :success).
  • La acción dispara toaster:action con su nombre; con action.done el aviso confirma (✓) antes de irse.
  • Arrastre de lado con resorte; se descarta pasado el 40% del ancho o con un tirón.
  • El tiempo se pausa al pasar el cursor, al enfocar, al arrastrar y con la pestaña oculta.

Props

Nombre Tipo Default Descripción
position :fixed | :inline :fixed Fijo abajo a la derecha (en móvil abajo y a lo ancho) o anclado al contenedor posicionado más cercano.
id String "eui-toasts" Id de la lista: destino de turbo_stream.append.
toasts Array<Hash> [] Avisos del servidor al renderizar (title, description, tone, action, duration).
duration Integer (ms) 4000 Tiempo en pantalla; con acción, 1.5×. Por aviso: duration (0 = se queda).
max Integer 3 Cuántos se ven en la pila.
global Boolean true si es :fixed Escucha window eui:toast.
label String "Avisos" Nombre de la región.

Accesibilidad