Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rkhayyat/nativescript-swipe-card
Swipe Card plugin for nativescript
https://github.com/rkhayyat/nativescript-swipe-card
angular nativescript plugin
Last synced: 3 days ago
JSON representation
Swipe Card plugin for nativescript
- Host: GitHub
- URL: https://github.com/rkhayyat/nativescript-swipe-card
- Owner: rkhayyat
- License: other
- Created: 2017-07-02T21:41:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T14:20:39.000Z (almost 7 years ago)
- Last Synced: 2024-09-15T13:53:01.685Z (18 days ago)
- Topics: angular, nativescript, plugin
- Language: TypeScript
- Homepage:
- Size: 2.94 MB
- Stars: 21
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/nativescript-swipe-card)
[](https://www.npmjs.com/package/nativescript-swipe-card)
[](https://twitter.com/rakhayyat)
[](https://nodei.co/npm/nativescript-swipe-card/)
# Nativescript Swipe Card plugin
This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe
# Nativescript-swipe-card
Tender cards, allow you to drag them, and detect swipe events.
Developed with :heart: by the team [NativeBaguette 🥖](https://www.nativescript.org/blog/meet-the-nativescript-ambassadors)
To know more about the {N} ambassador's program, you can check this [video](https://www.youtube.com/watch?v=Of-EeB56Fuc&t=4s), or read this [article](https://www.nativescript.org/blog/building-the-nativescript-swipe-cards-plugins-an-ambassador-story).
## Installation
```javascript
tns plugin add nativescript-swipe-card
```
## Usage
## Typescript NativeScript
### XML
```xml
```
### main-page
```typescript
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import {HelloWorldModel} from './main-view-model';
import {SwipeEvent} from 'nativescript-swipe-card';
// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
// Get the event sender
let page = args.object;
page.bindingContext = new HelloWorldModel();
let swipeCard = page.getViewById("swipe");
swipeCard.on("swipeEvent", (args:SwipeEvent) => {
if (args.direction === 1) {
//right
console.log('Swiped to right');
} else {
//left
console.log('Swiped to left');
}
});
}
```
### main-view-model
```typescript
import {Observable} from 'tns-core-modules/data/observable';
import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";
export class HelloWorldModel extends Observable {
public stackCards:Layout[];
constructor() {
super();
let Grid = new GridLayout();
let Label1 = new Label();
let Label2 = new Label();
Label1.text = "The Swipable Card plugin";
Label1.textWrap=true;
Label2.text = "Welcome to {N} we present you";
Label2.textWrap=true;
Grid.addChild(Label1);
Grid.addChild(Label2);
// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, "auto");
var secondRow = new ItemSpec(1, "auto");
Grid.addRow(firstRow);
Grid.addRow(secondRow);
GridLayout.setRow(Label1,0);
GridLayout.setRow(Label2,1);
let stack2 = new StackLayout();
let image = new Image();
image.src="~/images/apple.jpg"
image.height=100;
image.width=100;
stack2.verticalAlignment = "middle";
stack2.addChild(image);
let stack3 = new StackLayout();
let button = new Button();
button.text="Click me!";
button.width=100;
button.textAlignment = "center";
stack3.verticalAlignment = "middle";
stack3.addChild(button);
this.stackCards = [stack3,stack2,Grid];
}
}
```
Fun fact! Team Time-Travel (Luna Kang, Stefan Medjo and mentor Jen Looper used the plugin to complete their 'Fetching' app - a Tinder app for dogs that uses the Petfinder API to help dogs to find puppy playdates in their area!
https://github.com/jlooper/fetching-app-vanilla
## Angular NativeScript
### XML
```xml
```
### Component
```typescript
elementRegistryModule.registerElement("SwipeCard", () => require("nativescript-swipe-card").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";
import * as elementRegistryModule from 'nativescript-angular/element-registry';
@Component({
moduleId: module.id,
templateUrl: "helloworld.html"
})
export class helloworldComponent {
public stackCards:Array=[];
constructor(swipeEvent: SwipeEvent) {
let Grid = new GridLayout();
let Label1 = new Label();
let Label2 = new Label();
Label1.text = "The Swipable Card plugin";
Label1.textWrap=true;
Label2.text = "Welcome to {N} we present you";
Label2.textWrap=true;
Grid.addChild(Label1);
Grid.addChild(Label2);
// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, "auto");
var secondRow = new ItemSpec(1, "auto");
Grid.addRow(firstRow);
Grid.addRow(secondRow);
GridLayout.setRow(Label1,0);
GridLayout.setRow(Label2,1);
let stack2 = new StackLayout();
let image = new Image();
image.src="~/images/apple.jpg"
image.height=100;
image.width=100;
stack2.verticalAlignment = "middle";
stack2.addChild(image);
let stack3 = new StackLayout();
let button = new Button();
button.text="Click me!";
button.width=100;
button.textAlignment = "center";
stack3.verticalAlignment = "middle";
stack3.addChild(button);
this.stackCards = [stack3,stack2,Grid];
}
swipeEvent(args:SwipeEvent) {
if (args.direction === 1) {
//right
console.log('Swiped to right');
} else {
//left
console.log('Swiped to left');
}
};
}
```
PS: I used this plugin in other application built in Angular, you can check it here:
https://github.com/rkhayyat/SyrianForumFrance
## API
### Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `swipeEvent` | `function` | `SwipeEvent` | Callback called when the layout is swiped to the right or left and the swipe animation is done. Return args:SwipeEvent:
1- direction (1 if right/2 if left),
2- cardIndex contain the card index |
### Methods
| Method | Return | Description |
| --- | --- | --- |
| `items` | `Array` | Array of card's layout, in which we can define the content of each card. |
| `cardHeight` (optional)| `number` | Card's height in percentage of their container's height. |
| `cardWidth` (optional)| `number` | Card's width in percentage of their container's width. |
| `cardBorderRadius` (optional)| `number` | Card's border radius. |
| `cardBorderWidth` (optional)| `number` | Card's border's width. |
| `isRandomColor` (optional)| `number` | 1: Set card's colors randomly & automatically.
2: Set card's colors manually.
Default is 1. |
## NativeBaguette 🥖
[
](https://github.com/rhanbIT) | [
](https://github.com/rkhayyat) |[
](https://github.com/triniwiz) | [
](https://github.com/bradmartin) | [
](https://github.com/jlooper) |
:---: |:---: |:---: |:---: |:---: |
[rhanb](https://github.com/rhanbIT) | [rkhayyat](https://github.com/rkhayyat) |[triniwiz](https://github.com/triniwiz) |[bradmartin](https://github.com/bradmartin) |[jlooper](https://github.com/jlooper) |