Feature Request: Swipe Tabs

ionic-v1
1

This is a very popular navigation pattern in mobile apps (mostly in Android though), and it’s a must-have feature in Ionic IMO.

Here’s an example from Twitter:

I’m talking about the Home-Discovery-Activity tab bar.

8 Likes
2

Very nice, this feature has made its way into iOS twitter app as well.
Though I’m sure it could be put together using a slide box and watching which slide is active, the running some function.

By the way, nice screen shot with @Ben’s tweet… :thumbsup:

2 Likes
3

There’s also a line animation below the tab bar when sliding, so it’s not that easy to implement using just slide box. I really think it should be built-in since it’s so popular in so many apps.

Is there any chance you could implement this? It’s a killer feature!

Thanks!

P.S: what do you mean by “the running some function”?

1 Like
4

Its pretty rough right now, but check it out. Should get you in the right direction

Check your console to see an alert when you reach the second slide, third, then back to the first

5

I need a similar feature and have started playing around with it. In my case, the tab bar is not fixed, but dynamic and will contain more items than the space allowed. I will need some type of horiontial scroll of the tabs as we swipe through the slides.

6

Did you have any luck with this, @jajohga?

I am looking for something similar to what you describe, which is swipeable tabs like in the Spotify and Skype iOS apps:

Did you checkout the work in this thread:


Really cool component with similar functionality. Perhaps it could be extended?

7

Any news here? I would like to have something like swipeable="true" in the tabs component.
Thanks

3 Likes
8

Looking forward, is there an ETA?

9

I also want this type of component, it can be a great addition!!!

1 Like
10

+1 for this feature!

11

+1 from me too. This is a good feature

12

Vote up here: https://trello.com/c/dnCyi4wI/85-scrollable-tabs

13

Yes +1, this is the main comportement of Android tabs, all google App’s like Play store or Youtube has this feature, no one in Android touch the tabs for navigate ^^.

14

I see this discussion coming back again and again.

I was under the impression that “swipe between tabs” didn’t make much sense from a usability/UX point of view, but I see that it has become quite common in newer Android apps.

(but not so much in iOS apps, apparently)

Well, good idea or not but then it would be useful if it’s available.

15

Yes, this is possible. I played around with the tabs template and came to the following result:

<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">

And in each controller you will need the corresponding functions:

.controller('MyCtrl', function ($scope, $ionicTabsDelegate) {
$scope.goForward = function () {
var selected = $ionicTabsDelegate.selectedIndex();
if (selected != -1) {
$ionicTabsDelegate.select(selected + 1);
   }
 }

 $scope.goBack = function () {
var selected = $ionicTabsDelegate.selectedIndex();
if (selected != -1 && selected != 0) {
 $ionicTabsDelegate.select(selected - 1);
}
}
})

I don’t know if this is best practice and very robust. Like I said, I just played around a little after reading the docs.

I hope I gave you an idea of how it could work.

2 Likes
16

That worked perfectly for me. Thanks alot! @noormohamed

17

In case someone else is looking for this feature (like me), i just created a directive for that matter.
just give it a try, GitHub repository.

18

@souhailDEV Kindly, add the reference to your repo to https://forum.ionicframework.com/c/show-off-what-youre-working-on

1 Like