Runcode Ingeniería
25Jul 2021




Making Tinder Style Swipe Cards With Ionic Framework

best apps by runcode

Making Tinder Style Swipe Cards With Ionic Framework

The Tinder App recently got a complete large amount of attention, particularly the swipe cards are abruptly showing up every-where. Ionic has already been producing a remedy for everybody to create these kind easily of cards with HTML5 and Javascript. Consequently, in this guide we will reveal just how to include swipe that is tinder-style in your Ionic application by using a customized ion.

You will find the present task for ionic-ion-tinder-cards on github. Nevertheless, the demo is just a bit buggy as well as the paperwork at this point just isn’t extremely detail by detail, so follow along this tutorial to have a sweet card optic similar to this:

Setup your base App

We begin with a simple blank Ionic template and include the iOS and Android os system:

Now we have to install the the Ionic tinder cards, as a whole i favor it to put in these packages via bower therefore go right ahead and kind:

This may not merely install the Ionic tdcards, but in addition the collide.js lib that will be utilized in the tinder cards. We must import both within our application, therefore available your index.html and include the lines:

Including the tinder cards

To demonstrate any such thing, we must edit our index.html and can include the customized directives. Substitute every thing in the physical human body with:

We add cards for products within our range array, and additional some events are set by us when it comes to actions the cards get. These are typically quite explaining that is self i have to point out that some occasions don’t get entirely proper set off by now. I believe we will have an upgrade on these components when you look at the future that is near.

In the card we’ve some div elements, but we shall started to the styling later on in this guide. The essential component right here is to possess at the least the yes-text and no-text course, because they are targeted in the tinder cards collection. In the event that you don’t utilize them, you will notice plenty of JavaScript mistakes in your system!

Additionally we add the ‘no-scroll’ directive to the human body, so that you don’t scroll this content itself but just the cards. We determine this within our app.js and also inject the dependency towards the tinderCards:

Now just the controller we assigned to the content is lacking. Therefore go right ahead and include this to your app.js:

Absolutely absolutely Nothing unique in here. We define our array with cardtypes (you are able to find the pictures into the relevant github repo) and include the 3 cards to the range array for the ng-repeat we defined within the index. One other functions would be the people we assigned to the swipe occasions. You really swipe the card out fast for me, the cardDestroyed seems to work always while the other two only get called when.

The state Ionic demo additionally adds a brand new card whenever one ended up being destroyed/swiped away, but that results in strange UI behavior in my situation. When I stated before, you will see undoubtedly updates in the foreseeable future.

Include some custom styling

Final thing lacking has become some CSS. You saw at the beginning of this post if you run your app by now, the appearance won’t be close to what. Perhaps more components of the design may be incorporated into next releases, for add this to now your app.css:

As a whole, we’ve two components right right here: The styling and place for the card component, therefore the styling for the overlay that is slight you begin dragging the cards. You’ll mess around along with elements to suit your requirements, for me personally it was somehow a appropriate outcome. Now get ahead an run your software, and you ought to have three cool styled tinder cards! Did you spot the tiny impact on the card stack whenever you drag the very first card? Yes, Ionic posseses an optical eye for details.

You can have a look at my deployment on Heroku or deploy it directly to your Heroku if you want to see the tinder cards in action.


This guide explained steps to make Tinder design cards with Ionic, with only some directives and customized styling. Nonetheless, you can still find some points which has to be fixed. The swiping is certainly not always triggered properly, and a switch to programmatically pop the most notable card had not been working at this point. This will be an attribute you certainly constantly wish to have whenever making use of cards like these.

On twitter @schlimmson or have a look at my Blog Devdactic to see more tutorials about Ionic and other fancy frameworks if you like this tutorial or have any questions feel free to comment, follow me!

Comments (0)