触摸 MDB Pro component
触控-Bootstrap 5和Material Design 2.0
该组件可让您通过调用以下命令来改善移动触摸屏上的用户体验 以下自定义事件上的方法:捏,轻扫,点击,按下,平移和旋转。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
按
当元素上的触摸事件持续时间超过250时,Press调用选定的方法 毫秒。

Hold the button to remove the mask from the image
按下时间
触摸事件新闻并自定义持续时间。

Hold the button to remove the mask from the image with 5s
点按
使用包含原始字段(x和y)的对象调用tap事件上的回调 协调用户的触摸。

Tap button to change a color
双击
设置默认点击以触摸事件。

Change background color with 2 taps
泛
平移事件对于拖动元素很有用-每次用户在屏幕上移动手指时 指令所附加的元素,则使用 由两个键组成的参数:x和y(值对应于水平和 垂直翻译)。

向左平移
向左平移

向右平移
仅向正确方向平移

平移上/下
仅向上/向下方向平移

捏
pinch事件使用包含两个键的对象(比率和原点)调用给定方法。 第一个是用户在触摸端上的手指之间的距离与相同手指之间的距离之比 触摸启动时的距离-这对于缩放图像特别有用。第二个, 与doubleTap事件类似,是一对坐标,指示之间的中间点 用户的手指。

向左/向右滑动
滑动事件带有几个修改器(向左,向右,向上,向下)-每个都会 确保仅向该特定方向的滑动触发事件。如果指令是 如果不使用任何修饰符,则每次滑动时都会调用回调方法, 指示方向的字符串将作为参数传递。
本示例显示左右示例

Swipe Left-Right to change a color
向上/向下滑动
此示例显示上下左右的示例

Swipe Up-Down to change a color
旋转
此示例显示了带有rotate的示例

触摸 - API
用法
通过JavaScript
const myTouch = new mdb.Touch(document.getElementById('id'), event, options)
通过jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
$('.example-class').touch(event, options);
选件
点按
Name | Type | Default | Description |
---|---|---|---|
interval
|
number | 500 |
Set interval to tap |
time
|
number | 250 |
Set delays time to tap event |
taps
|
number | 1 |
Set default value of number for taps |
pointers
|
number | 1 |
Set default value of number for pointers |
按
Name | Type | Default | Description |
---|---|---|---|
time
|
number | 250 |
Set time delays to take tap |
pointers
|
number | 1 |
Set default value of number for pointers |
滑动
Name | Type | Default | Description |
---|---|---|---|
threshold
|
number | 10 |
Set distance bettwen when event fires |
direction
|
string | all |
Set direction to swipe. Available options: all, right, left, top, up. |
旋转
Name | Type | Default | Description |
---|---|---|---|
angle
|
number | 0 |
Set started angle to rotate. |
pointers
|
number | 2 |
Set default value of number for pointers |
泛
Name | Type | Default | Description |
---|---|---|---|
threshold
|
number | 20 |
Set distance bettwen when event fires |
direction
|
string | all |
Set direction to pan. Available options: all, right, left, top, up. |
pointers
|
number | 1 |
Set default value of number for pointers |
捏
Name | Type | Default | Description |
---|---|---|---|
pointers
|
number | 2 |
Option for tap event, set duration to how long it takes to take a tap
|
threshold
|
number | 10 |
Set distance bettwen when event fires |
方法
Name | Description | Example |
---|---|---|
dispose
|
Destroy component with this method |
element.dispose()
|
const element = document.getElementById('id')
const myTouch = new mdb.Touch(element, 'tap')
myTouch.dispose()
大事记
Name | Description |
---|---|
tap
|
This event fires tap touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'tap')
element.addEventListener('tap', (e) => {
// do something...
})
Name | Description |
---|---|
press
|
This event fires press touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'doubletap')
element.addEventListener('doubletap', (e) => {
// do something...
})
Name | Description |
---|---|
pan
|
This event fires pan touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'pan')
element.addEventListener('pan', (e) => {
// do something...
})
Name | Description |
---|---|
pinch
|
This event fires pinch touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'pinch')
element.addEventListener('pinch', (e) => {
// do something...
})
Name | Description |
---|---|
swipe
|
This event fires swipe touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'swipe')
element.addEventListener('swipe', (e) => {
// do something...
})
Name | Description |
---|---|
rotate
|
This event fires rotate touch funcionality. |
const element = document.getElementById('element-id');
const touchEvent = new mdb.Touch(element, 'rotate')
element.addEventListener('rotate', (e) => {
// do something...
})
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Touch } from 'mdb-ui-kit';