# Tabs with swipe

**URL:** <https://forum.ionicframework.com/t/tabs-with-swipe/6733>\
**Category:** ionic-v1\
**Created:** [July 12, 2014, 7:33am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733 "2014-07-12T07:33:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![hungha](https://avatars.discourse-cdn.com/v4/letter/h/58956e/32.png) [@hungha](https://forum.ionicframework.com/u/hungha)\
**Post date:** [July 12, 2014, 7:33am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/1 "2014-07-12T07:33:36Z")

</div>

Ionic is best htm5 hybrid mobile framework. 😄

I have a question:

I want create a navigation swipe for tabs, it same GooglePlay or Twitter android app.

How i can do? I’ve read some event [http://ionicframework.com/docs/api/directive/onDragRight/](http://ionicframework.com/docs/api/directive/onDragRight/)

and i think can use it, but when navigation tab1 -\> tab2, no animation.

Can you suggest me solution for animation?

Thank you!

---

<div class="post-metadata">

**Author:** ![epelc](https://avatars.discourse-cdn.com/v4/letter/e/4bbf92/32.png) [@epelc](https://forum.ionicframework.com/u/epelc)\
**Post date:** [August 16, 2014, 5:02am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/2 "2014-08-16T05:02:00Z")

</div>

I also need this. I saw it in fit rpg which was mentioned in a recent ionic blog post so you can do it with ionic its just a question of how hard is it. Anyways would really appropriate any information on implementing this or a timeline for when the ionic team would make it. Thanks

---

<div class="post-metadata">

**Author:** ![saravcts](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@saravcts](https://forum.ionicframework.com/u/saravcts)\
**Post date:** [August 16, 2014, 5:21am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/3 "2014-08-16T05:21:40Z")

</div>

This question might help: [I need a new Component! (Challenge?)](http://forum.ionicframework.com/t/i-need-a-new-component-challenge/5018/34)

Here is a sample: [http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/#/](http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/#/)

---

<div class="post-metadata">

**Author:** ![epelc](https://avatars.discourse-cdn.com/v4/letter/e/4bbf92/32.png) [@epelc](https://forum.ionicframework.com/u/epelc)\
**Post date:** [August 16, 2014, 11:20pm UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/4 "2014-08-16T23:20:37Z")

</div>

Thanks that’s perfect just need to style the tabs.

---

<div class="post-metadata">

**Author:** ![saravcts](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@saravcts](https://forum.ionicframework.com/u/saravcts)\
**Post date:** [August 17, 2014, 3:48am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/5 "2014-08-17T03:48:04Z")

</div>

@epelc Glad it is helpful. Please do share after you have styled the component.

---

<div class="post-metadata">

**Author:** ![danielPettifer](https://avatars.discourse-cdn.com/v4/letter/d/bc79bd/32.png) [@danielPettifer](https://forum.ionicframework.com/u/danielPettifer)\
**Post date:** [August 17, 2014, 1:49pm UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/6 "2014-08-17T13:49:22Z")

</div>

This is great for navigation, however I have one question. How can you stop the overscroll when you reach the sides (left and right)? If you have any pointers I would appreciate them, thank you!

---

<div class="post-metadata">

**Author:** ![hungha](https://avatars.discourse-cdn.com/v4/letter/h/58956e/32.png) [@hungha](https://forum.ionicframework.com/u/hungha)\
**Post date:** [August 18, 2014, 8:01am UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/7 "2014-08-18T08:01:24Z")

</div>

@saravcts  
I have one question:

How do config each tab with route?

your struct tab, all tab with run (only hidden) when open app?

---

<div class="post-metadata">

**Author:** ![saravcts](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@saravcts](https://forum.ionicframework.com/u/saravcts)\
**Post date:** [August 18, 2014, 6:09pm UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/8 "2014-08-18T18:09:05Z")

</div>

@danielPettifer, I am not sure how to prevent the overflowscroll for this component. I will dig into some more details and see if it can be handled.

@hungha, current component support only hidden pages. I will checkout, if ionic tabs support routing.

---

<div class="post-metadata">

**Author:** ![danielPettifer](https://avatars.discourse-cdn.com/v4/letter/d/bc79bd/32.png) [@danielPettifer](https://forum.ionicframework.com/u/danielPettifer)\
**Post date:** [August 18, 2014, 6:24pm UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/9 "2014-08-18T18:24:17Z")

</div>

It’s ok now I added a white background: ![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/3277/7234332c323795e8.PNG)

---

<div class="post-metadata">

**Author:** ![souhailDEV](https://avatars.discourse-cdn.com/v4/letter/s/d9b06d/32.png) [@souhailDEV](https://forum.ionicframework.com/u/souhailDEV)\
**Post date:** [March 25, 2018, 6:27pm UTC](https://forum.ionicframework.com/t/tabs-with-swipe/6733/10 "2018-03-25T18:27:50Z")

</div>

In case someone else is looking for animated tabs or swipable tabs, i just created a directive for that matter.  
just give it a try, [GitHub repository](https://github.com/SouhailBS/Ionic-AngularJS-Swipable-tabs).
