Ionic sliding tabs

agustinhaller · March 11, 2015, 5:42am

Hi, i want to implement sliding tabs similar to the ones of material design spec (http://www.google.com/design/spec/components/tabs.html#tabs-usage) and like the google newsstand app:

I started by decomposing ion-slidebox and ion-tabs directives to create a new ion-sliding-tabs.
One thing i’ve tried in the past with no luck was to ‘catch’ sliding events over the slide box and trigger the same event on other components (to mimic the effect of moving one element and having other element mirroring the movement with css3 transitions).

Can someone from the ionic dev team give me a hint on how to achieve this catching and triggering events to other elements?

Thanks in advance,
Agustin

shaulhadar · March 11, 2015, 7:11am

Hi Agustin, i am also searching for this element. the only thing that i found that cam close is the tabs slidebox compoenent… but it doesn’t have the effect of sliding the tab border when sliding to another page… i really think this is the hole grail for app structure, because no component has this feature yet…

but, i hope the angular material team will do something perhaps? it would be amazing.

If i will find anything i will let you know

agustinhaller · March 11, 2015, 11:46pm

Hi, i’ve found this component (https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox) but it’s not even close to the user experience i want to achieve.

PD: by the way, i’m the creator of ionFullApp on codecanyon, thanks for the purchase. I was interested in adding this sliding tabs to the app in future updates, i will let you know if i figure out how to achieve a perfect user experience.

shaulhadar · March 13, 2015, 6:28am

Hi Agustin. this is the same component i wrote about in the post before… I also tried to work with it, but because it is inside a slide box, it is a bit tricky in showing full pages, unless there is some editing there… i tried to edit it a bit with css and it looks a bit better, but its not there yet, though i am trying still. I hope you can make something like this for the future versions of ionicfullapp.

I really liked your project, as you know i downloaded it. if you would add the tabbed-slidebox element to this project it would be amazing. I am looking for good ionic templates to work with, and your’s is one of the best
I will keep checking if there is any component that is good, and in case i find something i will let you know…

agustinhaller · March 19, 2015, 4:56am

First approach:

shaulhadar · March 19, 2015, 11:36am

Wow man, you nailed it! Can’t wait to see it live:)

vicmota · March 19, 2015, 12:41pm

Wow! Will this code be available by any means?
Impressive work!

kevinhoo · March 21, 2015, 6:26pm

For sliding tabs I found this simple way to make iontabs slide with directive working on v1.0.0

gist.github.com

https://gist.github.com/taivo/fd08f6c960aacc11af6f

ion-tabs-swipable.js

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',

This file has been truncated. show original

However I’m not good in doing the animation.
Do anyone have idea how to add sliding animation with the above approach?

vicmota · March 22, 2015, 2:18am

The problem is you don’t get the neat effect of seeing the next tab while swiping.

dylanvdmerwe · March 24, 2015, 7:34pm

Wow this would be incredible to see working!

JKnorr · May 5, 2015, 3:40pm

I started to create my own slidingTabs solution:

But there is one huge Problem: I had to go into the core Ionic Scripts to add an additional expression to the directive. I will try to make a Pull Request, but i’m not sure, whether it will find its way into the ionic core framework.

shaulhadar · May 5, 2015, 7:39pm

Wow, this looks great! Any chance to see a live demo?

fuczak · May 5, 2015, 9:46pm

Great. You should submit a pull req.

JKnorr · May 6, 2015, 7:06am

Here is a first live demo:
http://knorr.ruhr/ionic

dylanvdmerwe · May 6, 2015, 7:20am

That is too cool! Would be an amazing inclusion to ionic!

shaulhadar · May 9, 2015, 6:39am

Amazing job Jknor, I really hope this will be a part of ionic, its about time we have some premium android elements:)

zeitgeb3r · May 12, 2015, 12:04am

JKnorr, have u done a pull request? I can’t see it here

JKnorr · May 13, 2015, 8:31am

You are right, i didn’t make a pull request, because contributing to Ionic requires full testing of all the components. But I’m working on it and plan to publish a standalone directive first. I think i will release it in the next week, so you just have to add an js file with the directive, some template code and little css code to get the sliding tabs to your project. In the first version it will only work if jquery is included into your project, but later i will replace the jQuery code with angulars jqlite.

JKnorr · May 26, 2015, 7:41pm

Finally my first release of my sliding Tabs solution is out now. You can find a demo and installation instructions in my repository : Ionic SlideBox Tabs

I’m always open for some feedback and improvement suggestions.

darth_coder · May 27, 2015, 6:35pm

Hi,
I have tried integrating this to a basic Ionic seed project (tabs) and it looks as if the slider bar under the tabs and the animation that’s there in your demo when you touch on a specific tab aren’t working.

I’m not sure what I’m doing wrong. Is there anyway you could provide us with a sample Ionic project with your sliding tab example?

Much appreciated. Thanks for this btw.