Touch Gestures

Touch gestures are often used in devices like tablets and phones to make apps more accessible and intuitive to use. We have integrated Hammer.JS into our Angular core to create easy-to-use directives for gesture-based actions.


Hammer.js Required

Our touch directives use the Hammer.js, library, which makes it easy to hook into common touch actions like swiping, pinching, rotating, and more. Our starter project (installed through the CLI) includes Hammer.js by default.


Swipe to Close

Add the zf-swipe-close directive to a closable element, such as a panel, off-canvas menu, modal, or notification, to trigger a close when the user swipes over the component. The swipe direction is set on the directive, and can be either up, down, left, or right.

Example Panel

Here's an example of the swipe-to-close directive applied to a panel.

×

Swipe to the left to close this panel.

Example Modal

In this example, the user can swipe up to dismiss the modal. We paired this gesture with an animation that slides the modal up as it fades out, by setting animation-out="slideOutUp" on the element.

Swipe up on this modal to close it.