https://github.com/mrnkr/nativescript-ngx-debounce-tap

{N} + Angular directive for debouncing taps and adding animated feedback to the interaction
https://github.com/mrnkr/nativescript-ngx-debounce-tap

angular nativescript nativescript-angular nativescript-plugin rxjs

Last synced: about 1 month ago
JSON representation

{N} + Angular directive for debouncing taps and adding animated feedback to the interaction

• Host: GitHub
• URL: https://github.com/mrnkr/nativescript-ngx-debounce-tap
• Owner: mrnkr
• License: apache-2.0
• Created: 2017-12-24T15:08:12.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-10T01:29:21.000Z (about 7 years ago)
• Last Synced: 2024-12-14T03:11:41.339Z (about 1 month ago)
• Topics: angular, nativescript, nativescript-angular, nativescript-plugin, rxjs
• Language: TypeScript
• Size: 2.39 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# nativescript-ngx-debounce-tap

[![NPM version][npm-image]][npm-url]

[![Downloads][downloads-image]][npm-url]

[![Twitter Follow][twitter-image]][twitter-url]

[npm-image]:http://img.shields.io/npm/v/nativescript-ngx-debounce-tap.svg

[npm-url]:https://npmjs.org/package/nativescript-ngx-debounce-tap

[downloads-image]:http://img.shields.io/npm/dm/nativescript-ngx-debounce-tap.svg

[twitter-image]:https://img.shields.io/twitter/follow/xmr_nkr.svg?style=social&label=Follow%20me

[twitter-url]:https://twitter.com/xmr_nkr

{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

```typescript

import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';

@NgModule({

    imports: [

        NgDebounceTapModule,

        // ...

    ],

    // ...

})

export class MyModule { }

```

### Then use it in your templates like so

```xml

 

```

### Do check out the demo for a quickstart

![Screenshot portrait](demo/app/assets/screenshot.png)

## 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