This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe
Tender cards, allow you to drag them, and detect swipe events.
Developed with
To know more about the {N} ambassador's program, you can check this video, or read this article.
tns plugin add nativescript-swipe-card
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:customControls="nativescript-swipe-card"
loaded="pageLoaded" class="page">
<StackLayout>
<customControls:SwipeCard id="swipe"
height="90%"
width="80%"
items="{{ stackCards }}"
cardHeight="60"
cardWidth="70"
isRandomColor="1"
cardBorderRadius="20"
cardBorderWidth="2"
/>
</StackLayout>
</Page>
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 = <pages.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');
}
});
}
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
<SwipeCard height="75%"
width="100%"
[items]="stackCards"
(swipeEvent)="swipeEvent($event)"
cardHeight="50"
cardWidth="80"
isRandomColor="1"
cardBorderRadius="15"
cardBorderWidth="1">
</SwipeCard>
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<Layout>=[];
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
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 |
Method | Return | Description |
---|---|---|
items |
Array<Layout> |
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. |
rhanb | rkhayyat | triniwiz | bradmartin | jlooper |
Nativescript-swipe-layout Simple swipeable layout, which allow you to drag it, detect swipe events, and perform swipe animations. Developed with ❤️ by the team NativeBaguette �� Installation tns plugi
The author of this plugin will continue to support it in a separate repo exclusively as part of ProPlugins. This repo will remain supported by the NativeScript community. Contribution - help wanted Th
轮播图,可自定义轮播时间间隔、动画时长等。 引入 import { Swipe, SwipeItem } from 'mint-ui'; Vue.component(Swipe.name, Swipe); Vue.component(SwipeItem.name, SwipeItem); 例子 基础用法 <mt-swipe :auto="4000"> <mt-swipe-item>1</m
滑动功能适用于移动设备。 以下指令用于处理滑动。 md-swipe-down ,Angular指令用于指定向下滑动元素时的自定义行为。 md-swipe-left ,Angular指令用于指定向左滑动元素时的自定义行为。 md-swipe-right ,Angular指令用于指定向右滑动元素时的自定义行为。 md-swipe-up ,Angular指令用于指定元素被刷新时的自定义行为。 例子 (E
Swipe 是一种针对特定领域的声明式语言,供非开发人员(如设计师、动画师、插画师、音乐家、摄像师和漫画家)创建包含照片、视频、图像、矢量图形、动画、声音、音乐和音效的富媒体/动画文档,这些文档将在智能手机、平板电脑和支持触摸的机顶盒(如iPhone和Apple TV)等触摸设备上使用。
可滑动的单元格,用法同 cell。 引入 import { CellSwipe } from 'mint-ui'; Vue.component(CellSwipe.name, CellSwipe); 例子 增加右滑动按钮 <mt-cell-swipe title="标题文字" :right="[ { content: 'Delete', style: {