Super Tabs within a single HTML page?

Ionic Framework ionic-v3
1

Hello guys,

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-tabs>
   <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>
 </super-tabs>

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.

Thanks,

2

Why? On the face of it, it sounds like bad style. But maybe there’s a reason.

1 Like
3

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.

4

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:
<component1 *ngIf="activeComponent===1"></component1>
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.

1 Like
5

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.

6

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.

7

You can use ionic slider + segment to have same experience as of tabs

1 Like
8

Awesome, I will try that now. Do you have any example code for that?

9

Just use ion-slider events to trigger segment chagne, and ion-segment events to trigger ion-slider change. @jamesharvey

1 Like
10

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:
https://material.angular.io/components/tabs

However angular material tab doesn’t work on ionic… so this is a great replacement. Thanks!