Foto subida a la galeríaDesliza a un lado para descartar
HTML + CSSToasts
Toast que se descarta deslizando
Arrastra el toast a un lado para quitarlo; se desvanece al alejarse y vuelve si lo sueltas pronto.
Ajustes
16px
1x
Código
<div class="uv-qsw"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="th" aria-hidden="true"></span><span class="tx"><b>Foto subida a la galería</b><small>Desliza a un lado para descartar</small></span><button type="button" class="x" aria-label="Descartar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg></span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
En el móvil, la gente espera poder apartar las notificaciones con el dedo. Este toast sigue el arrastre horizontal con una ligera inclinación y se desvanece según avanza; si pasa un umbral sale volando y si no vuelve al centro con un muelle. Una pequeña doble flecha se mueve dos veces al aparecer para que el gesto se descubra.
Un botón de cerrar hace lo mismo con ratón y teclado, y el scroll vertical sigue funcionando porque el toast solo captura el movimiento horizontal. Cambia la miniatura y el mensaje por los tuyos.