Tailwind CSS - 觸控行為

上一頁
下一頁

Tailwind CSS 觸控行為是一組預定義的類，用於控制如何在網頁上處理觸控互動，例如滾動和縮放。

Tailwind CSS 觸控行為類

下面是用於控制觸控行為的 Tailwind CSS 觸控行為類的列表。

類名 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;

Tailwind CSS 觸控行為類的功能

  • touch-auto: 允許正常的觸控互動，例如點選和滾動。
  • touch-none: 停用所有觸控互動，因此使用者無法在此元素上使用觸控操作。
  • touch-pan-x: 允許水平滑動，允許使用者左右移動。
  • touch-pan-left: 將觸控限制為僅向左移動或滾動。
  • touch-pan-right: 將觸控限制為僅向右移動或滾動。
  • touch-pan-y: 允許垂直滑動，允許使用者上下移動。
  • touch-pan-up: 將觸控限制為僅向上移動或滾動。
  • touch-pan-down: 將觸控限制為僅向下移動或滾動。
  • touch-pinch-zoom: 允許透過用兩個手指捏合來放大和縮小。
  • touch-manipulation: 允許觸控操作，例如移動和縮放，限制較少。

Tailwind CSS 觸控行為類示例

以下是 Tailwind CSS 觸控行為類的示例，這些示例演示瞭如何在網頁上控制各種觸控行為，例如滾動、捏合和平移。

理解 Tailwind CSS 中的觸控行為

此示例顯示了 Tailwind CSS 中的 **touch-auto** 和 **touch-none** 類如何影響觸控互動。第一張圖片允許滾動和縮放手勢，而第二張圖片對觸控手勢沒有響應。

示例

  
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
    <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: auto</h3>
            <div class="w-full h-60 overflow-auto touch-auto">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: none</h3>
            <div class="w-full h-60 overflow-auto touch-none">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
    </div>
</body> 

</html>

使用觸控行為進行滾動方向控制

此示例顯示 **touch-pan-x** 類如何允許水平滾動（左右），同時限制垂直滾動，而 **touch-pan-y** 類允許垂直滾動（上下），同時限制水平滾動，因此您可以在觸控式螢幕上僅沿一個方向移動影像。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
     <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-x</h3>
            <div class="w-full h-60 overflow-auto touch-pan-up">
                <img class="w-[200%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image"/>
            </div>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-y</h3>
            <div class="w-full h-60 overflow-auto touch-pan-down">
                <img class="w-[200%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
    </div>
</body>

</html>

Tailwind CSS 向上平移和向下平移

此示例顯示 **touch-pan-up** 類如何允許使用者向上滾動影像，而 **touch-pan-down** 類允許向下滾動，顯示觸控互動如何被限制在觸控式螢幕上的特定方向。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
       Try scrolling these images on a touchscreen
    </h3>
    <div class="grid grid-cols-2 gap-4">
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-up</h3>
            <div class="w-full h-60 overflow-auto touch-pan-up">
                <img class="w-[200%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2 text-sm">Scroll up</p>
        </div> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-down</h3>
            <div class="w-full h-60 overflow-auto touch-pan-down">
                <img class="w-[200%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2 text-sm">Scroll down</p>
        </div>
    </div>
</body>

</html>

使用 Tailwind CSS 進行捏合縮放和預設觸控行為

此示例演示了 **touch-pinch-zoom** 類如何啟用使用捏合手勢進行放大和縮小，而 **touch-manipulation** 類允許所有標準觸控互動，包括滾動和縮放。

示例

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
    <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pinch-zoom</h3>
            <div class="w-full h-60 overflow-auto touch-pinch-zoom">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
            <p class="mt-2">Zoom with pinch.</p>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: manipulation</h3>
            <div class="w-full h-60 overflow-auto touch-manipulation">
                <img class="w-[150%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2">Default touch gestures.</p>
        </div>
    </div>
    <p class="mt-4 text-center">Use the <strong>touch-*</strong>
        classes to control touch interactions.
    </p>
</body>

</html>
列印頁面
上一頁
下一頁
廣告