1.2.0 • Published 6 years ago
nativescript-ngx-debounce-tap v1.2.0
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
import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';
@NgModule({
imports: [
NgDebounceTapModule,
// ...
],
// ...
})
export class MyModule { }
Then use it in your templates like so
<Label text="Hello World!"
ngDebounceTap
[delay]="320"
[anim]="'composite'"
[scale]="1.06"
[opacity]="0.2"
(debounceTap)="hello()"></Label>
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