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
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Merge pull request #27 from jlcarvalho/patch-3 Jan 5, 2015
example WOrking Oct 9, 2014
.gitattributes 🎉 Added .gitattributes & .gitignore files Aug 6, 2014
.gitignore Bower Oct 20, 2014
LICENSE Initial Aug 6, 2014
README.md Add 'include collide.js' to usage instructions Apr 18, 2015
bower.json Fix name in bower.json Dec 24, 2014
ionic.tdcards.css Bower Oct 20, 2014
ionic.tdcards.js Make yes-text/no-text optional. Apr 3, 2015

README.md

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: https://github.com/driftyco/ionic-ion-swipe-cards where you swipe the cards down instead of left or right.

Demo

Install

bower install ionic-contrib-tinder-cards

Usage

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-cards>
  <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
    Card content here
  </td-card>
</td-cards>

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

$scope.cards = [
  { // card 1 },
  { // card 2 }
];

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

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