nativescript-ngx-debounce-tap
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    nativescript-ngx-debounce-tap

    NPM version Downloads Twitter Follow

    {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

    Screenshot portrait

    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

    Install

    npm i nativescript-ngx-debounce-tap

    DownloadsWeekly Downloads

    14

    Version

    1.2.0

    License

    Apache-2.0

    Last publish

    Collaborators

    • mrnkr