--- name: touch-gestures url: /touch-gestures title: Touch Gestures ---
×

This is a panel that closes when you swipe right.

×

This is a left panel.

×

This is a right panel. Swipe me to the right to close.

×

This is a top panel. Swipe me up to close.

×

This is a bottom panel. Swipe me down to close.

×

This is a fixed panel.

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.


Swipe-To-Close


Basic HTML

Using the various components that are "closable" e.g. panels, off-canvas menus, etc, zf-swipe-close can be added as an attribute to set the direction that you want to swipe in order to close the element. The directions available are 'up', 'left', 'down', and 'right'. The swipe directive must be on the same level as the target element, and the target element should have an ID attribute.

×

This is a panel that closes when you swipe right.

Basic Swipe-to-Close Panel

Other Gestures

Hammer.JS includes a number of gestures that are recognized in their library including pan, pinch, press, rotate, swipe, and tap. While swipe to close is our own implentation of a common gesture that webapps use, you are also welcome to create your own triggers as well.