Ionic sliding tabs

demo
1

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

7 Likes
2

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 :slight_smile:

3

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.

4

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 :smile:
I will keep checking if there is any component that is good, and in case i find something i will let you know…

2 Likes
5

First approach:
image

8 Likes
6

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

1 Like
7

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

8

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

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

9

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

10

Wow this would be incredible to see working!

11

I started to create my own slidingTabs solution:

image
slideTabs.gif376×666 236 KB

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.

4 Likes
12

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

13

Great. You should submit a pull req.

14

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

5 Likes
15

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

1 Like
16

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

1 Like
17

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

18

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.

2 Likes
19

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.

10 Likes
20

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.

1 Like