0.0.4 • Published 6 years ago
ng-swipe-card v0.0.4
ng-swipe-card
Tinder-like swipe-able cards
Installation
The package can be installed via npm:
npm install ng-swipe-card --save
You'll need to install and include hammerjs to your project to run this lib.
npm install hammerjs --save
Usage
Include hammerjs to angular.json
as build option:
{
"architect": {
// ...
"build": {
"options": {
// ...
"scripts": ["./node_modules/hammerjs/hammer.min.js"]
}
}
},
Include styles to your root scss:
@import "~ng-swipe-card/style/styles";
Include SwipeCardLibModule to your root module
import {SwipeCardLibModule} from 'ng-swipe-card';
@NgModule({
// ...
imports: [ SwipeCardLibModule ]
})
Print your cards using <sw-card-wrapper></sw-card-wrapper>
component and swSwipeable
directive:
<sw-card-wrapper #cardWrapper>
<div class="card" *ngFor="let card of cards, let index = index"
swSwipeable
[width]="400"
[height]="600"
[orientation]="'x'"
(onRelease)="removeBy(index)">
{{card}}
</div>
<div class="btn-block">
<button (click)="cardWrapper.dislike()">dislike</button>
<button (click)="cardWrapper.like()">like</button>
</div>
</sw-card-wrapper>
@Inputs:
Name | Description |
---|---|
[width]: number | set card width |
[height]: number | set card height |
[fixed]: boolean | set fixed behaviour (if true - prevent swiping) |
[orientation]: 'x' or 'y' or 'xy' | set swiping orientation |
@Outputs:
Name | Description |
---|---|
(released): EventEmitter | dispatch event when card has been released |
(swiped): EventEmitter<boolean> | dispatch event when card has been swiped (true - if user swipe to right, false - to left) |
Customize
To customize colors on swipe you can extend default options:
import {SW_SWIPE_CARD_DEFAULT_OPTIONS} from 'ng-swipe-card';
@NgModule({
// ...
providers: [{
provide: SW_SWIPE_CARD_DEFAULT_OPTIONS,
useValue: {likeColor: '104,159,56', dislikeColor: '193,3,2'}
}]
})
export class AppModule {
}