var reactive =touch =var tpl = '<div on-swipeleft="swipe">Swipe left</div>'var view =
This live example demonstrates:
- Custom recognizers
- Reactive enabling of events
- Per-element and per-view options
npm i reactive-touch
Then bundle for the browser with browserify.
bindings: existing bindings to extend
options: per-view options (see below)
Your view can react to any Hammer event by adding attributes in the form of
on-[event]="handler name". If no handler name is given, it is assumed to be the event name. These are the same:
The handler will receive two arguments, similar to reactive's built-in
ev: event data
ctx: reactive instance
Each element with touch bindings gets a set of recognizers. Recognizers can be configured per-view and per-element.
Add attributes in the form of
[recognizer]-[option]="value". Values will be interpolated if wrapped in brackets, and cast to integers, floats or booleans if necessary. Examples:
Group options by lowercase recognizer name.
Simply add a group to
options with a custom name. Optionally set
recognizer, required if the name doesn't contain a standard name. In the following example,
recognizer could have been left out.
List of options
|with||A lowercase recognizer name (e.g.
|requireFailure||A lowercase recognizer name that is required to fail before recognizing. Shortcut for requireFailure().|
|setup||A view method name, called after recognizer is created and options are set. For advanced usage. Receives three arguments:
direction, use a
Hammer.DIRECTION_* constant or a shorthand like
left, etc. Please follow the links below for a description of the other options.
|Swipe||threshold, pointers, direction, velocity|
|Pan||pointers, threshold, direction|
|Tap||pointers, taps, interval, time, threshold, posThreshold|
|Press||pointers, threshold, time|
List of events
|Swipe||swipe, swipeleft, swiperight, swipeup, swipedown|
|Pan||pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown|
|Pinch||pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout|
|Rotate||rotate, rotatestart, rotatemove, rotateend, rotatecancel|
npm i zuul -g npm test
npm run test-local