Making Tinder-Style Swipe Cards With Ionic Framework
January 16, 2015
Simon Reimler
Mobile Development
The Tinder App recently got a lot of attention, especially the swipe cards are suddenly appearing everywhere. Ionic is already creating a solution for everyone to easily create these kind of cards with HTML5 and Javascript. Therefore, in this tutorial I will show you how to add Tinder-style swipe cards in your Ionic app with the help of a custom ion.
You can find the current project for ionic-ion-tinder-cards on github. However, the demo is a bit buggy and the documentation by now is not very detailed, so follow along this tutorial to get a sweet card optic like this:
Setup your base App
We start with a simple blank Ionic template and add the iOS and Android Platform:
ionic start ionic-tinderstyle blank
cd ionic-tinderstyle
ionic platform add ios
ionic platform add android
Now we need to install the the Ionic tinder cards, in general I prefer it to install these packages via bower so go ahead and type:
bower install --save ionic-contrib-tinder-cards
This will not only install the Ionic tdcards, but also the collide.js lib which is used inside the tinder cards. We need to import both in our app, therefore open your index.html and add the lines:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic-contrib-tinder-cards/ionic.tdcards.js"></script>
</head>
Adding the tinder cards
To show anything, we need to edit our index.html and include the custom directives. Replace everything inside the body with:
<body ng-app="starter" no-scroll>
<ion-pane ng-controller="CardsCtrl">
<ion-header-bar class="bar-calm">
<h1 class="title">Ionic Tinder Cards</h1>
</ion-header-bar>
<td-cards>
<td-card id="td-card" ng-repeat="card in cards" on-destroy="cardDestroyed($index)"
on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)"
on-partial-swipe="cardPartialSwipe(amt)">
<div class="title">
{{card.title}}
</div>
<div class="image">
<div class="no-text overlayBox"><div class="noBox boxed">Trash</div></div>
<img ng-src="{{card.image}}">
<div class="yes-text overlayBox"><div class="yesBox boxed" id="centerMe">Save</div></div>
</div>
</td-card>
</td-cards>
</ion-pane>
</body>
We add cards for items in our scope array, and additional we set some events for the actions the cards receive. They are quite self explaining, I must mention that some events don’t get completely correct triggered by now. I think we will see an update on these parts in the near future.
Inside the card we have some div elements, but we will come to the styling later in this tutorial. The important part here is to have at least the yes-text and no-text class, as they are targeted inside the tinder cards library. If you don’t use them, you will see a lot of JavaScript errors in your console!
Furthermore we add the ‘no-scroll’ directive to our body, so you don’t scroll the content itself but only the cards. We define this in our app.js and also inject the dependency to the tinderCards:
angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards'])
.directive('noScroll', function() {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
$element.on('touchmove', function(e) {
e.preventDefault();
});
}
}
})
Now only the controller we assigned to our content is missing. So go ahead and add this to your app.js:
.controller('CardsCtrl', function($scope) {
var cardTypes = [
{ image: 'img/pic2.png', title: 'So much grass #hippster'},
{ image: 'img/pic3.png', title: 'Way too much Sand, right?'},
{ image: 'img/pic4.png', title: 'Beautiful sky from wherever'},
];
$scope.cards = [];
$scope.addCard = function(i) {
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
for(var i = 0; i < 3; i++) $scope.addCard();
$scope.cardSwipedLeft = function(index) {
console.log('Left swipe');
}
$scope.cardSwipedRight = function(index) {
console.log('Right swipe');
}
$scope.cardDestroyed = function(index) {
$scope.cards.splice(index, 1);
console.log('Card removed');
}
});
Nothing special in here. We define our array with cardtypes (you can find the images in the related github repo) and add the three cards to our scope array for the ng-repeat we defined in the index. The other functions are the ones we assigned to our swipe events. For me, the cardDestroyed seems to work always while the other two only get called when you really swipe the card out fast.
The official Ionic demo also adds a new card whenever one was destroyed/swiped out, but that results in strange UI behavior for me. As I said before, there will be definitely updates in the future.
Add some custom styling
Last thing missing is now some CSS. If you run your app by now, the appearance won’t be close to what you saw at the beginning of this post. Maybe more elements of the style will be included in next releases, for now add this to your app.css:
/* Card styling */
td-cards {
display: block;
}
td-card {
position: absolute;
left: 50%;
margin: 80px 0 40px -150px;
width: 300px;
height: 300px;
border: 1px solid #999;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
border-radius: 6px;
background-color: rgb(255,255,255);
}
.td-card .title {
height: 40px;
font-size: 15px;
padding: 15px;
}
td-card .image {
position: absolute;
top: 40px;
width: 100%;
}
td-card img {
height: 258px;
width: 100%;
border-radius: 6px;
}
/* Overlay styling*/
.overlayBox {
position: absolute;
left: 50%;
height: 98%;
width: 100%;
top: -80px;
opacity: 0;
margin: 80px 0 0 -149px;
}
.boxed {
height: 50px;
width: 100px;
padding: 10px;
border-radius: 6px;
font-size: 30px;
}
.yes-text {
background-color: rgba(0,256,0,0.2);
}
.yesBox {
margin: 10% 60% 0% 10%;
border: 2px solid #00FF00;
color: rgb(0, 256, 0);
-webkit-transform: rotate(-25deg);
}
.no-text {
background-color: rgba(256,0,0,0.2);
}
.noBox {
margin: 10% 10% 0% 60%;
border: 2px solid #FF0000;
color: rgb(256, 0, 0);
-webkit-transform: rotate(25deg);
}
.fade {
-webkit-transition: 0.2s opacity linear;
transition: 0.2s opacity linear;
opacity: 0;
}
In general, we have two parts here: The styling and position of the card component, and the styling for a slight overlay when you start dragging the cards. You can play around with all elements to fit your needs, for me this was somehow an acceptable result. Now go ahead an run your app, and you should have three cool styled tinder cards! Did you notice the small effect on the card stack when you drag the first card? Yes, Ionic has an eye for details.
If you want to see the tinder cards in action, you can have a look at my deployment on Heroku or deploy it directly to your Heroku.
Conclusion
This tutorial explained how to make Tinder style cards with Ionic, with just some directives and custom styling. However, there are still some points which needs to be fixed. The swiping is not always triggered correctly, and a button to programmatically pop the top card was not working by now. This would be a feature you most certainly always want to have when using cards like these.
If you like this tutorial or have any questions feel free to comment, follow me on twitter @schlimmson or have a look at my Blog Devdactic to see more tutorials about Ionic and other fancy frameworks!
Simon Reimler
Application Developer and Process Optimization at arvato Bertelsmann, Germany| Passioned about Apps and Modern Frameworks | Objective-C, Ionic Framework, AngularJS, Java, Python and Javascript | Blogging about Mobile Development and Modern Frameworks on http://www.devdactic.com
Follow Us
Support This Site
If you found this developer resource helpful, please consider supporting it through the following options:
