Сенсорное действие
touch-action
В SIMAI Framework с помощью модифкаторов можно управлять прокруткой и масштабированием элемента на сенсорных экранах.
Классы
| Класс | Значение |
|---|---|
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; |
Описание
Адаптивный модификатор. Задает направление прокрутки и уровень масштабирования элемента на сенсорных экранах.
Использование модификатора: {контрольная точка}:{модификатор}
-
Контрольная точка. Необязательный параметр.
Применяет модификатор начиная с определенного размера области
просмотра, согласно контрольным точкам
(
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
С помощью модификатора touch-{action} - для управления прокруткой и масштабированием элемента на сенсорных экранах.
touch-auto
touch-none
touch-pan-x
touch-pan-y
<div class="w-full h-f1 overflow-auto touch-auto ...">
<img class="h-auto w-150" src="./picture.svg">
</div>
<div class="w-full h-f1 overflow-auto touch-none ...">
<img class="h-auto w-150" src="./picture.svg">
</div>
<div class="w-full h-f1 overflow-auto touch-pan-x ...">
<img class="h-auto w-150" src="./picture.svg">
</div>
<div class="w-full h-f1 overflow-auto touch-pan-y ...">
<img class="h-auto w-150" src="./picture.svg">
</div>