Creating Tinder-Style Swipe Notes With Ionic Structure

Creating Tinder-Style Swipe Notes With Ionic Structure

The Tinder software not too long ago have most interest, particularly the swipe notes tend to be quickly being everywhere. Ionic is generating a simple solution for everybody to conveniently produce these types of cards with HTML5 and Javascript. Consequently, within this guide i shall explain to you simple tips to add Tinder-style swipe notes inside Ionic software with the aid of a custom ion.

You will find the current work for ionic-ion-tinder-cards on github. But the demo is a little buggy together with documentation at this point is not very step-by-step, very follow along this tutorial to obtain a sweet card optic in this way:

Create your own base App

We start out with straightforward blank Ionic template and include the iOS and Android program:

Today we must download the the Ionic tinder notes, as a whole I like it to set up these plans via bower so go ahead and means:

This can not simply put in the Ionic tdcards, but in addition the collide.js lib which is used inside tinder cards. We must transfer both in all of our software, thus available your own directory.html and add the contours:

Incorporating the tinder notes

To display any such thing, we must edit our list.html and can include the customized directives. Exchange every thing within the human anatomy with:

We add notes for items in all of our scope collection, and extra we ready some happenings when it comes to actions the cards receive. They are very self explaining, I must point out that some activities don’t have completely correct set off by now. In my opinion we will have an update on these elements soon.

In the credit we have some div factors, but we’re going to arrive at the design afterwards within information. The main part listed here is to possess about the yes-text and no-text course, because they’re focused inside tinder cards collection. Should you don’t use them, you will see countless JavaScript problems within unit!

Also we create the ‘no-scroll’ directive to your looks, Numer telefonu internationalcupid so you don’t browse the content it self but precisely the notes. We determine this within our app.js but also inject the addiction into the tinderCards:

Today only the operator we allotted to the material is lacking. Very go on and incorporate this to your app.js:

Little special in here. We establish our very own collection with cardtypes (you will find the images in the related github repo) and add the three cards to our extent range for your ng-repeat we identified from inside the list. One other applications are the ones we allotted to our swipe events. Personally, the cardDestroyed appears to work usually while the various other two just get called once you truly swipe the cards around fast.

The official Ionic demonstration additionally contributes a new cards when one ended up being destroyed/swiped completely, but that causes strange UI attitude in my situation. As I stated before, there will be absolutely changes as time goes by.

Atart exercising . customized design

Last thing lost has become some CSS. Any time you operated your software right now, the looks won’t getting near that which you noticed at the start of this article. Perhaps most components of the design and style is going to be a part of subsequent releases, for now incorporate this to your app.css:

Generally, we have two areas right here: The design and situation of the cards part, in addition to styling for hook overlay when you begin dragging the cards. You can easily play around with elements to fit your needs, in my situation this is in some way a satisfactory result. Now go ahead an run your software, and you should have three cool designed tinder notes! Do you see the little effect on the card stack whenever you pull the most important cards? Yes, Ionic possess an eye for details.

If you wish to understand tinder notes in action, you can get a review of my personal implementation on Heroku or deploy they directly to your Heroku.


This guide revealed learning to make Tinder style cards with Ionic, in just some directives and custom styling. But you can still find some things which has to be solved. The swiping is not always created correctly, and a button to programmatically pop the best card was not employed at this point. This will be a feature you definitely usually want to have when making use of notes such as.

If you love this tutorial or have any inquiries please remark, stick to myself on twitter or look at my weblog Devdactic observe extra training about Ionic alongside extravagant frameworks!