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
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 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

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