Gestos

Estado: Beta

Deslizar para reservar

En vez de un clic que se da sin querer, la reserva (o cancelar, o pagar) pide arrastrar el pulgar hasta el final. Si se suelta antes, regresa con resorte. Al confirmar envía su formulario, así que funciona con Turbo sin código extra.

app/views/… (la demo de arriba)

<div class="flex w-full max-w-sm flex-col items-center gap-4">
  <%= render Ui::SlideToConfirmComponent.new(label: "Desliza para reservar", confirmed_label: "¡Lugar reservado!", reset_after: 2500) %>
  <%= render Ui::SlideToConfirmComponent.new(label: "Desliza para cancelar", confirmed_label: "Reserva cancelada", tone: :danger, size: :sm, reset_after: 2500) %>
</div>

Qué hace

  • Envía el formulario que lo contiene con requestSubmit (Turbo incluido).
  • Dispara slide-to-confirm:confirm (y el nombre anterior, :confirmed, mientras se migra) para conectar cualquier otra reacción.
  • Umbral de 85% y regreso con el resorte "responsive".
  • Vibración breve en teléfonos que la soportan.

Props

Nombre Tipo Default Descripción
label String "Desliza para confirmar" Texto del carril y nombre accesible del pulgar.
confirmed_label String "Listo" Lo que aparece (y se anuncia) al confirmar.
size :sm | :md | :lg :md Alto del carril y tamaño del pulgar.
tone :neutral | :danger :neutral :danger para cancelar o borrar (:default y :destructive siguen sirviendo).
reset_after Integer (ms) 0 Vuelve al inicio tras confirmar; 0 = se queda confirmado.
disabled Boolean false Deshabilita el gesto y el teclado.

Accesibilidad