交互
用于控制元素如何在触摸屏上滚动和缩放的工具。
¥Basic usage
¥Setting the touch action
使用 touch-*
工具来控制元素如何在触摸屏上滚动(平移)和缩放(收缩)。
¥Use the touch-*
utilities to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens.
尝试在触摸屏上平移这些图片
touch-auto
touch-none
touch-pan-x
touch-pan-y
<div class="w-full h-48 overflow-auto touch-auto ...">
<img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-none ...">
<img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-pan-x ...">
<img class="w-[150%] max-w-none h-auto" src="..." />
</div>
<div class="w-full h-48 overflow-auto touch-pan-y ...">
<img class="w-[150%] max-w-none h-auto" src="..." />
</div>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用focus:touch-pan-x
仅在 focus 时应用 touch-pan-x
工具。
<div class="focus:touch-pan-x">
<!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:touch-pan-x
仅在中等屏幕尺寸及以上时应用 touch-pan-x
工具。
<div class="md:touch-pan-x">
<!-- ... -->
</div>