https://github.com/ionic-team/ionic-ion-tinder-cards
Add Tinder-style card swiping to any app with this simple Ionic Ion.
https://github.com/ionic-team/ionic-ion-tinder-cards
Last synced: 4 months ago
JSON representation
Add Tinder-style card swiping to any app with this simple Ionic Ion.
- Host: GitHub
- URL: https://github.com/ionic-team/ionic-ion-tinder-cards
- Owner: ionic-team
- License: mit
- Archived: true
- Created: 2014-08-06T03:08:18.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-22T19:40:00.000Z (almost 10 years ago)
- Last Synced: 2025-10-01T22:34:14.195Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 9.1 MB
- Stars: 389
- Watchers: 42
- Forks: 146
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ionic Contrib: Tinder Cards
===================
Swipeable card based layout for Ionic and Angular. As seen in apps like [Tinder](http://www.gotinder.com/)
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](http://codepen.io/ionic/pen/nxEdH)
## 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:
```html
Card content here
```
To add new cards dynamically, just add them to the cards array:
```javascript
$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);
};
```