Touch
Bootstrap 5 Touch
This component enables you to enhance the user experience on mobile touch screens by invoking methods on the following custom events: pinch, swipe, tap, press, pan, and rotate.
Note: Read the API tab to find all available options and advanced customization
Note: This method is intended only for users of mobile touch screens, so it won't work for the mouse or keyboard events.
* * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method. Press
Press calls the chosen method when the touch event on the element lasts longer than 250 milliseconds.
Hold the button to remove the mask from the image
Press duration
Touch event press with custom duration.
Hold the button to remove the mask from the image with 5 seconds
Tap
The callback on tap event is called with an object containing the origin field - the x and y coordinates of the user's touch.
Tap button to change a color
Double Tap
Set default taps to touch event.
Change background color with 2 taps
Pan
The pan event is useful for dragging elements. Each time the user moves a finger on the element to which the directive is attached, the given method is being called with an argument consisting of two keys: x and y (representing horizontal and vertical translation).
Pan Left
Pan with only left direction.
Pan Right
Pan with only right direction.
Pan Up/Down
Pan with only up/down direction.
Pinch
The pinch event calls the given method with an object containing two keys - ratio and origin. The first one is the ratio of the distance between user's fingers on touchend to the same distance on touchstart - it's particularly useful for scaling images. The second one, similarly as in doubleTap event, is a pair of coordinates indicating the middle point between the user's fingers.
Swipe Left/Right
The swipe event comes with several modifiers (left, right, up, down). Each modifier will ensure that event will fire only on swipe in that particular direction. If the directive is used without any modifier, the callback method will be called each time the swiping occurs, and the string indicating the direction will be passed as an argument.
The following example demonstrates usage with 'left' and 'right' modifiers.
Swipe Left-Right to change a color
Swipe Up/Down
The following example demonstrates usage with 'up' and 'down' modifiers.
Swipe Up-Down to change a color
Rotate
This example shows example with rotate.