Interactividad
touch-action
Utilidades para controlar cómo se puede desplazar y hacer zoom en un elemento en pantallas táctiles.
| Clase | Estilos |
|---|---|
touch-auto | touch-action: auto; |
touch-none | touch-action: none; |
touch-pan-x | touch-action: pan-x; |
touch-pan-left | touch-action: pan-left; |
touch-pan-right | touch-action: pan-right; |
touch-pan-y | touch-action: pan-y; |
touch-pan-up | touch-action: pan-up; |
touch-pan-down | touch-action: pan-down; |
touch-pinch-zoom | touch-action: pinch-zoom; |
touch-manipulation | touch-action: manipulation; |
Ejemplos
Ejemplo básico
Usa utilidades como touch-pan-y y touch-pinch-zoom para controlar cómo se puede desplazar (paneo) y hacer zoom (pellizco) en un elemento en pantallas táctiles:
Intenta desplazar estas imágenes en una pantalla táctil
touch-auto
touch-none
touch-pan-x
touch-pan-y
<div class="h-48 w-full touch-auto overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-none overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-x overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-y overflow-auto ..."> <img class="h-auto w-[150%] max-w-none" src="..." /></div>Diseño responsivo
Antepone a la utilidad touch-action el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="touch-pan-x md:touch-auto ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.