触摸 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';