- LLucíaFactura de octubre
- MMarcosFotos del viaje
- EEquipo de diseñoRevisión del lunes
- NNora¿Café esta tarde?
Lista de tirar para actualizar
Arrastra la lista hacia abajo y el indicador se carga con tu gesto; al soltar llegan mensajes nuevos.
Ajustes
Código
<div class="uv-mpr"><div class="ind" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg></div><ul class="ls"><li><span class="av" style="--c:#ec4899">L</span><div><b>Lucía</b><span>Factura de octubre</span></div><time>9:41</time></li><li><span class="av" style="--c:#0ea5e9">M</span><div><b>Marcos</b><span>Fotos del viaje</span></div><time>9:12</time></li><li><span class="av" style="--c:#f59e0b">E</span><div><b>Equipo de diseño</b><span>Revisión del lunes</span></div><time>Ayer</time></li><li><span class="av" style="--c:#10b981">N</span><div><b>Nora</b><span>¿Café esta tarde?</span></div><time>Ayer</time></li></ul><button type="button" class="rf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>Actualizar</button><p class="sr" aria-live="polite"></p></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 Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
El gesto de siempre en el móvil, hecho para la web. Al arrastrar la lista de mensajes hacia abajo aparece un arco que crece y gira con el tirón, con una resistencia que aumenta cuanto más bajas. Si sueltas pasado el umbral, la lista se queda bajada mientras gira el indicador y luego entra arriba un mensaje nuevo con un leve resaltado.
Los eventos de puntero sirven para ratón, lápiz y dedo, y un botón de actualizar ofrece la misma acción con teclado y lector de pantalla, con un aviso cuando la bandeja se actualiza. Conecta el temporizador a tu petición real.