- Tailwind CSS 教程
- Tailwind CSS - 首页
- Tailwind CSS - 路线图
- Tailwind CSS - 简介
- Tailwind CSS - 安装
- Tailwind CSS - 编辑器设置
- Tailwind CSS - 核心概念
- Tailwind CSS - 实用优先基础
- Tailwind CSS - 悬停、焦点和其他状态
- Tailwind CSS - 响应式设计
- Tailwind CSS - 暗黑模式
- Tailwind CSS - 重用样式
- Tailwind CSS - 添加自定义样式
- Tailwind CSS - 函数和指令
- Tailwind CSS - 自定义
- Tailwind CSS - 配置
- Tailwind CSS - 内容配置
- Tailwind CSS - 主题配置
- Tailwind CSS - 自定义屏幕
- Tailwind CSS - 自定义颜色
- Tailwind CSS - 自定义间距
- Tailwind CSS - 插件
- Tailwind CSS - 预设
- Tailwind CSS - 基本样式
- Tailwind CSS - 预处理
- Tailwind CSS - 布局
- Tailwind CSS - 宽高比
- Tailwind CSS - 容器
- Tailwind CSS - 列
- Tailwind CSS - 断行后
- Tailwind CSS - 断行前
- Tailwind CSS - 断行内
- Tailwind CSS - 边框装饰断开
- Tailwind CSS - 盒子大小
- Tailwind CSS - 显示
- Tailwind CSS - 浮动
- Tailwind CSS - 清除浮动
- Tailwind CSS - 隔离
- Tailwind CSS - 对象适应
- Tailwind CSS - 对象位置
- Tailwind CSS - 溢出
- Tailwind CSS - 滚动行为
- Tailwind CSS - 位置
- Tailwind CSS - 上/右/下/左
- Tailwind CSS - 可见性
- Tailwind CSS - Z-Index
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基准
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 换行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 伸展
- Tailwind CSS - Flex 收缩
- Tailwind CSS - 排序
- Tailwind CSS - 网格模板列
- Tailwind CSS - 网格列开始/结束
- Tailwind CSS - 网格模板行
- Tailwind CSS - 网格行开始/结束
- Tailwind CSS - 网格自动流
- Tailwind CSS - 网格自动列
- Tailwind CSS - 网格自动行
- Tailwind CSS - 间隙
- Tailwind CSS - 内容对齐
- Tailwind CSS - 项目对齐
- Tailwind CSS - 自身对齐
- Tailwind CSS - 内容排列
- Tailwind CSS - 项目排列
- Tailwind CSS - 自身排列
- Tailwind CSS - 内容放置
- Tailwind CSS - 项目放置
- Tailwind CSS - 自身放置
- Tailwind CSS - 间距
- Tailwind CSS - 内边距
- Tailwind CSS - 外边距
- Tailwind CSS - 间距 (空间)
- Tailwind CSS - 大小
- Tailwind CSS - 宽度
- Tailwind CSS - 最小宽度
- Tailwind CSS - 最大宽度
- Tailwind CSS - 高度
- Tailwind CSS - 最小高度
- Tailwind CSS - 最大高度
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 字体系列
- Tailwind CSS - 字体大小
- Tailwind CSS - 字体平滑
- Tailwind CSS - 字体样式
- Tailwind CSS - 字体粗细
- Tailwind CSS - 数字字体变体
- Tailwind CSS - 字间距
- Tailwind CSS - 行数限制
- Tailwind CSS - 行高
- Tailwind CSS - 列表样式图片
- Tailwind CSS - 列表样式位置
- Tailwind CSS - 列表样式类型
- Tailwind CSS - 文本对齐
- Tailwind CSS - 文本颜色
- Tailwind CSS - 文本装饰
- Tailwind CSS - 文本装饰颜色
- Tailwind CSS - 文本装饰样式
- Tailwind CSS - 文本装饰粗细
- Tailwind CSS - 文本下划线偏移
- Tailwind CSS - 文本转换
- Tailwind CSS - 文本溢出
- Tailwind CSS - 文本换行
- Tailwind CSS - 文本缩进
- Tailwind CSS - 垂直对齐
- Tailwind CSS - 空格
- Tailwind CSS - 断字
- Tailwind CSS - 连字符
- Tailwind CSS - 内容
- Tailwind CSS - 背景
- Tailwind CSS - 背景附件
- Tailwind CSS - 背景裁剪
- Tailwind CSS - 背景颜色
- Tailwind CSS - 背景原点
- Tailwind CSS - 背景位置
- Tailwind CSS - 背景重复
- Tailwind CSS - 背景大小
- Tailwind CSS - 背景图片
- Tailwind CSS - 渐变颜色停止
- Tailwind CSS - 边框
- Tailwind CSS - 边框半径
- Tailwind CSS - 边框宽度
- Tailwind CSS - 边框颜色
- Tailwind CSS - 边框样式
- Tailwind CSS - 分隔线宽度
- Tailwind CSS - 分隔线颜色
- Tailwind CSS - 分隔线样式
- Tailwind CSS - 轮廓宽度
- Tailwind CSS - 轮廓颜色
- Tailwind CSS - 轮廓样式
- Tailwind CSS - 轮廓偏移
- Tailwind CSS - 环宽度
- Tailwind CSS - 环颜色
- Tailwind CSS - 环偏移宽度
- Tailwind CSS - 环偏移颜色
- Tailwind CSS - 效果
- Tailwind CSS - 盒子阴影
- Tailwind CSS - 盒子阴影颜色
- Tailwind CSS - 不透明度
- Tailwind CSS - 混合模式
- Tailwind CSS - 背景混合模式
- Tailwind CSS - 滤镜
- Tailwind CSS - 模糊
- Tailwind CSS - 亮度
- Tailwind CSS - 对比度
- Tailwind CSS - 投影
- Tailwind CSS - 灰度
- Tailwind CSS - 色相旋转
- Tailwind CSS - 反相
- Tailwind CSS - 饱和度
- Tailwind CSS - 棕褐色
- Tailwind CSS - 背景模糊
- Tailwind CSS - 背景亮度
- Tailwind CSS - 背景对比度
- Tailwind CSS - 背景灰度
- Tailwind CSS - 背景色相旋转
- Tailwind CSS - 背景反相
- Tailwind CSS - 背景不透明度
- Tailwind CSS - 背景饱和度
- Tailwind CSS - 背景棕褐色
- Tailwind CSS - 表格
- Tailwind CSS - 边框折叠
- Tailwind CSS - 边框间距
- Tailwind CSS - 表格布局
- Tailwind CSS - 标题位置
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 过渡属性
- Tailwind CSS - 过渡持续时间
- Tailwind CSS - 过渡定时函数
- Tailwind CSS - 过渡延迟
- Tailwind CSS - 动画
- Tailwind CSS - 变换
- Tailwind CSS - 缩放
- Tailwind CSS - 旋转
- Tailwind CSS - 位移
- Tailwind CSS - 倾斜
- Tailwind CSS - 变换原点
- Tailwind CSS - 交互性
- Tailwind CSS - 重音颜色
- Tailwind CSS - 外观
- Tailwind CSS - 光标
- Tailwind CSS - 光标颜色
- Tailwind CSS - 指针事件
- Tailwind CSS - 调整大小
- Tailwind CSS - 滚动行为
- Tailwind CSS - 滚动边距
- Tailwind CSS - 滚动填充
- Tailwind CSS - 滚动捕捉对齐
- Tailwind CSS - 滚动捕捉停止
- Tailwind CSS - 滚动捕捉类型
- Tailwind CSS - 触摸行为
- Tailwind CSS - 用户选择
- Tailwind CSS - 将更改
- Tailwind CSS - SVG
- Tailwind CSS - 填充
- Tailwind CSS - 描边
- Tailwind CSS - 描边宽度
- Tailwind CSS - 可访问性
- Tailwind CSS - 读屏器
- Tailwind CSS - 强制颜色调整
- Tailwind CSS - 附加内容
- Tailwind CSS - 与预处理器一起使用
- Tailwind CSS - 生产环境优化
- Tailwind CSS - 参考
- Tailwind CSS - 核心概念
- Tailwind CSS - 自定义
- Tailwind CSS - 布局
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - 间距
- Tailwind CSS - 大小
- Tailwind CSS - 排版
- Tailwind CSS - 背景
- Tailwind CSS - 边框
- Tailwind CSS - 效果
- Tailwind CSS - 滤镜
- Tailwind CSS - 表格
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 变换
- Tailwind CSS - 交互性
- Tailwind CSS - 资源
- Tailwind CSS - 讨论
- Tailwind CSS - 有用资源
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>
广告