--- name: touch-gestures url: /touch-gestures title: Touch Gestures ---
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.
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
.
Here's an example of the swipe-to-close directive applied to a panel.
Swipe to the left to close this panel.
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.