Gestos

Estado: Beta

Celebración

Envuelve una acción y, cuando se confirma, lanza una ráfaga corta de partículas en la luz del estudio desde el elemento que la disparó: la reserva hecha, la clase 100, el paquete comprado. Escucha un clic o cualquier evento que burbujee, como el de deslizar para reservar.

app/views/… (la demo de arriba)

<%= render Ui::CelebrationComponent.new(event: "slide-to-confirm:confirm", class: "flex w-full max-w-sm justify-center") do %>
  <%= render Ui::SlideToConfirmComponent.new(label: "Desliza para reservar", confirmed_label: "¡Nos vemos en clase!", reset_after: 2500) %>
<% end %>

Qué hace

  • Física simple por cuadro: velocidad inicial, gravedad, fricción del aire y desvanecido.
  • Círculos y rayitas orientadas a su velocidad, en el acento y la tinta del estudio con opacidad.
  • El canvas es fijo, se crea al disparar y se quita al terminar; no recorta ni crea scroll.
  • Como acción: data-action="turbo:submit-end->celebration#burst" festeja la respuesta del servidor.

Props

Nombre Tipo Default Descripción
event String "click" Evento(s) que disparan la ráfaga, separados por espacio (p. ej. "slide-to-confirm:confirm"). "" = solo como acción celebration#burst. on: es su nombre anterior.
count Integer 22 Partículas por ráfaga (entre 18 y 28).
data Hash {} Atributos data del envoltorio; el controlador se combina con los tuyos.
class String nil Clases del envoltorio (es un <div> relative).

Accesibilidad