06 Jan Generating Tinder-Style Swipe Cards With Ionic Platform
You’ll find current work for ionic-ion-tinder-cards on github. But the demo is a little buggy and the documents right now is not all that step-by-step, so adhere along this tutorial for a sweet cards optic in this way:
Installed your own base App
We begin with an easy empty Ionic template and add the apple’s ios and Android os Platform:
Today we have to install the the Ionic tinder notes, as a whole I like it to put in these packages via bower therefore go right ahead and means:
This will just download the Ionic tdcards, but furthermore the collide.js lib used inside tinder cards. We must import both in all of our app, for that reason available your index.html and create the contours:
Including the tinder cards
Showing nothing, we must edit our very own directory.html and include the customized directives. Replace every thing inside system with:
We incorporate notes for products in the range collection, and additional we set some occasions the actions the cards obtain. They’re very self explaining, i need to point out that some occasions don’t get entirely proper triggered by today. I believe we will have an update on these elements in the future.
In addition we add the ‘no-scroll’ directive to our human anatomy, so you don’t browse this content it self but precisely the cards. We establish this within app.js also shoot the dependency towards the tinderCards:
Today only the control we assigned to our contents is missing out on. Therefore go right ahead and incorporate this towards app.js:
Little unique in right here. We establish our very own collection with cardtypes (you find the images into the associated github repo) and create the three notes to the extent array for all the ng-repeat we identified from inside the index. Additional performance are those we allotted to the swipe events. For me personally, the cardDestroyed generally seems to run always whilst the additional two merely bring also known as as soon as you truly swipe the card
The official Ionic trial also brings a unique card anytime one got destroyed/swiped completely, but that causes unusual UI attitude for me. When I said before, you will see definitely updates down the road.
Atart exercising . custom made design
Very last thing lost happens to be some CSS. If you operated your software at this point, the look won’t become near everything saw at the start of this article. Maybe considerably elements of the design and style is incorporated into further secretes, for the present time add this your app.css:
Generally, we two elements here: The design and situation associated with the card part, and design for a little overlay when you start pulling the notes. You can play around with all of elements to fit your requires, for me personally it was in some way an acceptable outcome. Now go-ahead an run your application, and you should have three cool themed tinder cards! Do you see the small effect on the credit bunch once you drag 1st card? Yes, Ionic enjoys an eye for details.
When you need to see the tinder notes doing his thing, you can get a peek at my personal implementation on Heroku or deploy it directly to their Heroku.
This guide discussed steps to make Tinder preferences notes with Ionic, in just some directives and custom made design. But you can still find some guidelines which must be fixed. The swiping is not always caused precisely, and a button to programmatically take the utmost effective cards was not working by now. This could be a characteristic you definitely always want when using cards such as.
If you prefer this tutorial or have any inquiries go ahead and comment, follow me on twitter or look at my personal writings Devdactic to see additional lessons about Ionic and various other elegant frameworks!