-
-
Save taivo/fd08f6c960aacc11af6f to your computer and use it in GitHub Desktop.
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); | |
}); | |
} | |
}; | |
}]); |
its working fine.. but no animation.. how to add slide animation
Since I see an ion-tabs and ion-slide-box module in a project of mine, I'm going to try to combine the two to have swipe tab support. Wish me luck.
Any luck? @abegit
How can I add animation in the transition ?
for any body struggling with this I worked around the problem using a watcher on the selected index and then a "reverse" css style on ng-class:
js:
$scope.previousTab = 0;
$scope.currentTab = 0;
$scope.$watch(function() {return $ionicTabsDelegate.selectedIndex();}, function(index) {
$scope.previousTab = $scope.currentTab;
$scope.currentTab = index;
});
html:
<ion-tabs tabs-swipable class="tabs-positive slide-left-right" ng-class="{reverse: currentTab < previousTab}">
hope this helps someone else out.
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
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.
Yes it is worked for me but animation is blinking while swiping.