Interactivity
Touch Action v1.1.1
Utilities for set control over the effect of touchscreen interactions to an element.
Class
class | css |
---|---|
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 |
Usage
Set an element with touch limit to pan-left
, no pan-right
is allowed.
<!-- Example -->
<y class="touch-pan-left ... overflow-scroll overscroll-contain">
...
</y>
Set an element with touch limit to pan-none
, x
and y
panning is disabled.
<!-- Example -->
<y class="touch-none ... overflow-scroll overscroll-contain">
...
</y>
Set an element with full touch manipulation, x
and y
panning is enabled.
<!-- Example -->
<y class="touch-manipulation ... overflow-scroll overscroll-contain">
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |