Ionic Swipeable Tabs are now here!

Have you tested it on a device?

Thank you for a good job with the tabs!
In my application Iā€™m using both sidenav and your tabbar. It doesnā€™t look the way I want it to. I want the tabbar to be placed underneath my ion-header. http://prntscr.com/fmlmze ā€¦ Is it possible ?

Hello its great work but can you help to fix issue of mine
i want to use ionic swappable tabs with single page can it be possible without using root page?

Thereā€™s an issue open for this on Github.

Its not possible to do a to do at the moment. Not sure if Iā€™ll add this
feature any time soon.

So i used the swipeable tabs but it preloads the provider calls even if they are on other tabs and not viewed. I see thereā€™s an issue open on git, any idea how soon that will be resolved?

I followed your guide to implement the library, but I have this error:

Error: Uncaught (in promise): TypeError: this._renderer.setElementStyle is not a function
TypeError: this._renderer.setElementStyle is not a function
at SuperTab.Ion.setElementStyle (http://localhost:8100/build/main.js:16566:24)
at SuperTab.setWidth (http://localhost:8100/build/main.js:80874:14)
at SuperTabs.addTab (http://localhost:8100/build/main.js:58309:13)
at SuperTab.ngOnInit (http://localhost:8100/build/main.js:80833:21)
at checkAndUpdateDirectiveInline (http://localhost:8100/build/main.js:11093:19)
at checkAndUpdateNodeInline (http://localhost:8100/build/main.js:12516:17)
at checkAndUpdateNode (http://localhost:8100/build/main.js:12455:16)
at debugCheckAndUpdateNode (http://localhost:8100/build/main.js:13158:59)
at debugCheckDirectivesFn (http://localhost:8100/build/main.js:13099:13)
at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:117:5)

What should I do?

1 Like

The latest version of the library is compatible with only ionic-angular@^3.4.0
ā€¦ use an older version of the library if your ionic-angular isnā€™t up to
date

I have the same problem. My ionic-angular is up to 3.4.2.

My ionic-angular is 3.4.0

Is there a way to hide super tabs in sub pages. For ion-tabs we can use tabsHideOnSubPages. I donā€™t see a param like this in super tab.

Hello,

I am having the following issue when I am trying to use this plugin. I am not sure what the problem is. I would appreciate all your help. Thank you in advance

Quoted from ihadeed

To answer you second question, there isnā€™t anything like tabsHideOnSubPages. If you want to achieve such functionality, you can follow this example: https://github.com/zyra/ionic2-super-tabs-example/blob/master/src/pages/page1/page1.ts#L22

rootNavCtrl is automatically added to the NavParams of all sub-tabs. It references to the NavController of the page containing the super-tabs component. This allows you to push pages from the root page rather than the inner one.

Using Ionic 3.5 and version 3.0.2 of the plugin. Getting: " Canā€™t bind to ā€˜rootā€™ since it isnā€™t a known property of ā€˜super-tabā€™", as far as i know i followed all instructions.

Added

import {SuperTabsModule } from 'ionic2-super-tabs';

to app.module.ts and the following to the import:

SuperTabsModule.forRoot(),

On the relevant page, using:

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

and passing page1,page2 and page3 in the export class NewsPage {}

  page1: any = TestPage;
  page2: any = Test2Page;
  page3: any = Test3Page;

These pages existā€¦ What am i doing wrong?

If you are using lazy module loading, then you also need to import
SuperTabsModule in the child modules.

Please check existing issues on Github and report and problems there.

The Super tabs always load active tab and the next tab only at first time? Is it true?

If yes, is it possible to load number of tabs defined by user? Or is there any change to change number of loaded tabs?

Thanks

1 Like

Woohoooo :tada: Very nice

I try your solution. itā€™s amazing thank you.
with ionic 3.6.0" you need to override the css.
because the toolbar will not show up

super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon {
height: 110px !important;
padding-top: 60px !important;
}

super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button {
font-size: 10px;
}

@ihadeed it will be awsome if you add a feature about badges on super-tab

Hi guys,

Iā€™ve clone the demo repo and ionic serve it.
Seems like it dosnt work with 3.7.0. I get this error : "Cannot find module ā€œionic2-super-tabsā€, whatā€™s wrong?

Thanks

This worked for me in ionic 3.8 on android - however it didnā€™t swipe in the safari browser on ā€˜ionic serveā€™.