Add Tinder-style card swiping to any app with this simple Ionic Ion.
Switch branches/tags
Nothing to show
Clone or download
mlynch Merge pull request #62 from danielmiller-nl/patch-1
Add 'include collide.js' to usage instructions
Latest commit 723de6a May 13, 2015

Ionic Contrib: Tinder Cards

Swipeable card based layout for Ionic and Angular. As seen in apps like Tinder
Note: There is also a similar ion library here: where you swipe the cards down instead of left or right.



bower install ionic-contrib-tinder-cards


Include ionic.tdcards.js, collide.js and ionic.tdcards.css after the rest of your Ionic and Angular includes. Add ionic.contrib.ui.tinderCards as a module dependency of your app. Then use the following AngularJS directives:

  <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
    Card content here

To add new cards dynamically, just add them to the cards array:

$ = [
  { // card 1 },
  { // card 2 }

$scope.cardDestroyed = function(index) {
  $, 1);

$scope.cardSwiped = function(index) {
  var newCard = // new card data