Skip to content

keithdmoore/ionic-contrib-tinder-cards

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ionic Contrib: Swipeable Cards

Swipeable card based layout for Ionic and Angular. As seen in apps like Jelly

Demo

Usage

Include ionic.tdcards.js after the rest of your Ionic and Angular includes. 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);
};

About

Work in progress

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 90.7%
  • CSS 9.3%