Touch Action

Control touch interactions

Syntax

visual="touch:[value]"

Values

Value	CSS Output	Description
auto	touch-action: auto	Default touch
none	touch-action: none	Disable touch
pan-x	touch-action: pan-x	Pan horizontally
pan-y	touch-action: pan-y	Pan vertically
pan-left	touch-action: pan-left	Pan left
pan-right	touch-action: pan-right	Pan right
pinch-zoom	touch-action: pinch-zoom	Pinch to zoom
manipulation	touch-action: manipulation	Pan and pinch only

Examples

<div visual="touch:manipulation">Touch optimized</div>

Preview

Touch Action

visual="touch:manipulation" - Control touch gestures

pan-x

pan-y

manipulation

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">pan-x</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
</div>