I discovered a nice Ionic component called Super Tabs.
It looks like this requires three different HTML pages to render its slide animation.
I’m building an app which does everything on a single HTML page so this configuration is not ideal for me.
<super-tab [root]="page1" title="First page"></super-tab>
<super-tab [root]="page2" title="Second page"></super-tab>
<super-tab [root]="page3" title="Third page"></super-tab>
Is it possible to use this within a single HTML file and set div as its page?
If so how can I set a div as its page? I would rather have three div than three different HTML files…
Any advice would be really appreciated.
Why? On the face of it, it sounds like bad style. But maybe there’s a reason.
I’m building an app that does it all on a single HTML page…
It’s really bad to have several pages in this set up.
That is a particular app I’m working on… a control interface will be on this supertab so it can’t be stored somewhere else.
and this super tab will be nested within ion-segment.
How can I use div as a page on super tabs? is there any way?
I think this one is the only alternative to Angular Material Tabs which doesn’t work well on Ionic.
Maybe then I should create a custom made angular tab with slide animations… but that’s going to be some work.
Still need some help here… opinions would be appreciated.
I haven’t read the SuperTabs source code, but there must be. Maybe the cleanest way would be to create three separate components and do this:
and then have component2 and component3 there too, with whatever their real names are. Then whenever SuperTabs pushes a page, you change that to a new value for activeComponent.
Thanks for response! I will try that shortly.
Eventually, I may build something using Angular animations and typescript. Angular web animations module works fine on Ionic and it lets you trigger complex animations with buttons & tabs easily.
Well the supertab doesn’t work without having three different html pages loaded.
It causes an error: ‘invalid vew to insert’ on start if you don’t declare all three pages.
Any luck with trying angular material tabs?
That is the only way around I guess…
Maybe I will try Ionic slider … and put contents inside. But I’m not sure if it works with tabs.
You can use ionic slider + segment to have same experience as of tabs
Awesome, I will try that now. Do you have any example code for that?
Just use ion-slider events to trigger segment chagne, and ion-segment events to trigger ion-slider change. @jamesharvey
Yes, I think this is how super tab was created. Ion segment with ion slide work well together.
This is originally from Angular’s material tab:
However angular material tab doesn’t work on ionic… so this is a great replacement. Thanks!