nativescript-ngx-debounce-tap
{N} + Angular directive for debouncing taps and adding animated feedback to the interaction.
Installation
tns plugin add nativescript-ngx-debounce-tap
Usage
Import the module in your app module
;
Then use it in your templates like so
Do check out the demo for a quickstart
API
Property | Type | Default | Description |
---|---|---|---|
delay | number | 300 | The time between each processed tap in milliseconds. |
anim | string | n/a | The way the interaction is to be animated. Possible values: 'composite', 'opacity', 'scale'. Scale => The element is magnified and returned to its original state. Opacity => The element has its opacity dropped to 0.6 and then returns to normal, like TouchableOpacity in React Native (not the values, the behavior). Composite => Performs both animations symultaneously. |
scale | number | 1.2 | The scale to use when magnifying the element. Set this in order to keep the animation as seamless as possible. |
opacity | number | 0.6 | The opacity used to animate the interaction. Set it to your liking, the default value can be hard to see on some scenarios so keep that in mind! |
debounceTap | EventEmitter | n/a | The event that is emitted when a tap is processed. The $event variable will have a reference to the element that was tapped (as an ElementRef). In case the scale animation is not your thing you can set [anim] to false and make one that suits you in this callback yourself. |
Changelog
1.2.0 - Added the opacity @Input property to the directive for further customization. 1.1.0 - Added opacity animation as an option. 1.0.0 - Initial implementation
License
Apache License Version 2.0, January 2004