Skip to content

Instantly share code, notes, and snippets.

@taivo
Created December 16, 2014 02:37
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save taivo/fd08f6c960aacc11af6f to your computer and use it in GitHub Desktop.
Save taivo/fd08f6c960aacc11af6f to your computer and use it in GitHub Desktop.
Swipe navigation for ion-tabs (for ionic framework v 1.0.0)
angular.module('yourModule')
.directive('tabsSwipable', ['$ionicGesture', function($ionicGesture){
//
// make ionTabs swipable. leftswipe -> nextTab, rightswipe -> prevTab
// Usage: just add this as an attribute in the ionTabs tag
// <ion-tabs tabs-swipable> ... </ion-tabs>
//
return {
restrict: 'A',
require: 'ionTabs',
link: function(scope, elm, attrs, tabsCtrl){
var onSwipeLeft = function(){
var target = tabsCtrl.selectedIndex() + 1;
if(target < tabsCtrl.tabs.length){
scope.$apply(tabsCtrl.select(target));
}
};
var onSwipeRight = function(){
var target = tabsCtrl.selectedIndex() - 1;
if(target >= 0){
scope.$apply(tabsCtrl.select(target));
}
};
var swipeGesture = $ionicGesture.on('swipeleft', onSwipeLeft, elm).on('swiperight', onSwipeRight);
scope.$on('$destroy', function() {
$ionicGesture.off(swipeGesture, 'swipeleft', onSwipeLeft);
$ionicGesture.off(swipeGesture, 'swiperight', onSwipeRight);
});
}
};
}]);
@SrijithRad
Copy link

Here is a starter template with the above gist. Would try to add animation. Contributions are welcome

https://github.com/SrijithRad/ionic-swipeable-tabs-demo

@SouhailBS
Copy link

In case someone else is looking for animated tabs or swipable tabs, i just created a directive (inspired by @SrijithRad ) for that matter.
just give it a try, GitHub repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment