There should be an option to lazy load tabs to reduce memory load. Lazy loading configuration should allow the following:

• load tabs only when the user might swipe through them
• unload tabs if the user can not swipe through them (which means maximum of 3 tabs will be loaded at the same time)

Tabs should fire viewWillLeave, viewWillEnter, viewDidLeave, viewDidEnter.

Update: On a second thought, only the "did" events should fire

HTML

<super-tabs [*ngIf]="isOnline" height="100%" tabsColor="dark" electedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }">
    <super-tab [root]="tab1Root" title="Map" icon="map" id="mapTab"></super-tab>
    <super-tab [root]="tab2Root" title="List" icon="list" id="listTab"></super-tab>
  </super-tabs>

JS

this.superTabsCtrl.enableTabSwipe("mapTab", false);

If you use "ngIf" it initially works but if the super tabs component does not comply with the if condition and is removed from the DOM and then the if condition does comply and the super tabs component is re-introduced in the DOM then it will not work anymore.

The workaround was to use [hidden] instead of ngIf in order to keep it in the DOM.

First, thanks for creating this awesome project!

I got an error after upgrading to the latest version, after some investigation it seem to break when used in a project which uses the standard ionic tabs on the root page.

Any super-tabs version on a clean root page without ionic tabs
-> Works

super-tabs <= v 2.1.0 on a root page with ionic tabs
-> Works

super-tabs >= 2.2.0 on a root page with ionic tabs
-> Throws error below

content.js:799` Uncaught TypeError: this._tabs.setTabbarPosition is not a function
   at Content._writeDimensions (content.js:799)
    at content.js:214
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3840)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:236)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
    at EventEmitter.emit (core.es5.js:3814)
    at Array.<anonymous> (page-transition.js:34)
    at IOSTransition.Animation._fireBeforeWriteFunc (animation.js:838)
    at IOSTransition.Animation._beforeAnimation (animation.js:749)
    at IOSTransition.Animation._playDomInspect (animation.js:411)

Here is a repo to reproduce the error
repo

• ionic2-starter-tabs template
• Added supertabs on homepage with the contact page & about page as tabs pages
• Currently on supertabs 2.2.0 and throws error
• Downgrade to 2.1.0 and it works

two super-tab( selectedTabIndex="0" ), other super-tab( Tab selected Index="1" ) use http get the data *ngFor is not working

data:any = [];

getforkdata() {
var _that = this;

let url = "http://www.devonhello.com/chihu/share";

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

this.data = [1,2,3,4];   // now data has changed *ngFor is ok

this.http.post(url, "len=1", {
  headers: headers
})
  .subscribe((res) => {
    //alert(JSON.stringify(res.json()));
    _that.data = res.json();      // now *ngFor is not working,Even if the data has changed
    //alert(_that.forkdata.length);
  });

}

If you have a chance, it should be pretty easy to pass the swipeBackEnabled attribute from super-tab to the nav. In some apps there just may be too many swipe-able elements.

https://ionicframework.com/docs/api/components/nav/Nav/

Hi,
When first time i open my page t takes me desired tab as mentioned in selectedtabindex but icon for that tab is not getting highlighted.
But if i start sliding the tabs it works perfectly.

I try use *ngFor to generated tab,But it does not work。
Ionic3+ag4
Example:
html:

<super-tabs id="tab" scrollTabs>
    <super-tab *ngFor="let item of obj_CategorysListData, let i = index" scrollTabs [root]="lookContent"
               title="123"></super-tab>
  </super-tabs>

ts:

  obj_CategorysListData = [];

  ionViewDidLoad() {
    this.lookservice.getAllcategory().subscribe(
      countries => this.obj_CategorysListData = <any>countries,
      error => this.errorMessage = <any>error,
      function complete() {
      },
    );
  }

I'm relatively new to Ionic so I'm sure I'm being super dumb here, but I used your super tabs to make our dashboard (three pages as swipeable tabs), and the only way I can swipe back to the side menu is through the ion-toolbar at the top, which is about 1 cm.

This seems to happen only when loading the page in a small window, then resizing it to be larger. The indicator position for the second tab has an incorrect offset.

I have a map as one of my tabs and currently it's difficult to pan the map without triggering a swipe of the tabs. I've tried changing the sensitivity, but can't seem to find the right balance. I wondered if it is possible to only trigger a swipe from the very edge of the device? That way, I could at least pan the map from the center of the device.

Again thanks for the awesome work you have done!

I notice that content above super-tabs doesn´t transition when navigating to page containing super-tabs and content above the tabs.

To reproduce:

• Add a div above supertabs
• Navigate to the page from the root Nav controller
  

Edit: there is a <super-tabs> tag under the purple box, just couldn´t get it to show. The content in the super tabs gets transitioned correctly. If I remove the <super-tabs> under the purple box, the box gets transitioned.

I have erro in page to tags:
Runtime Error
Uncaught (in promise): invalid views to insert

My version ionic:
Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 6.10.3
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64

I need change other values when I select another tab.

I usually use the output event (click) or (onClick).

Please help me!!

Update: deep linking essentially works now, but it doesn't let you automatically push pages inside one of the tabs, it just selects the tab for you automatically.

Fist of all, this project is a great work! Thanks a lot for that.

Here is my question:

I start to think if there is a way of use this compent using on <ion-segment> way instead of create page for each page. If yes, would be of great help.

Similar to ion-menu:

import { SuperTabsController } from 'ionic2-super-tabs';
@Component({
  selector: 'page-some',
  template: 'hello',
})
export class SomePage {

  constructor(private tabsCtrl: SuperTabsController) {}

  ionViewDidEnter() {

    this.tabsCtrl.swipeEnable(false, 'optional tab ID to disable swiping on');
  }
  ionViewWillLeave() {

    this.tabsCtrl.swipeEnable(true, 'optional tab ID to disable swiping on');
  }
}

The tab ID would be set in the HTML:

<super-tab [tabRoot]="page1" title="First page" id="mySettingsTab"></super-tab>

This way you can refer to it by ID rather than tab index.

v2.1.0

• Tabs working
• Provider/Http content displayed in tabs

v2.2.2

• Tabs stopped working

v2.3.0

• Tabs working
• Provider/Http content not displayed on second tab

To reproduce

• Use the tabs starter template
• Add super tabs with 2 tabs
• Add list in both tabs

<ion-list no-padding no-margin>
  <ion-item *ngFor="let item of stuff?.stuff" >
    Item
  </ion-item>  
</ion-list>

Grab some data from a povider using http

ionViewDidLoad() {    
    this.loadData();
  }

  loadData() {
    this.stuffProvider.getStuff().subscribe((response) => {
      this.stuff = {
        stuff: response.data
      };      
    });
  }

On the second tab the data from the provider is null

Here is a simple repo, downgrading to 2.1.0 makes it work
repo

Thanks again for all the great work you have done with this project!

Hi,
there is a Design bug on iOS. If the Position of the Super Tabs is Bottom the Content is behind the status Bar. Look at the Screenshot. I think we must add some padding-top or somethink like that.
It is on a real device and on Ionic Serve Lab

This is my tmp fix

// Ionic Super Tabs iOS Fix
super-tabs-container {
    ion-header {
        .toolbar {
            padding-top: calc(20px + 4px);
            min-height: calc(44px + 20px);
            .title {
                padding-top: 20px;
                height: calc(44px + 20px);
                min-height: calc(44px + 20px);
            }
        }
    }
}

Thank you for a fix +1

In v2.5.2 (and all previous versions) when you go from portrait to landscape mode, the underline under the right tab is in the wrong position. See attached screenshot, the blue underline needs to be directly under the right tab but it is offset towards the left.

(P.S. accidentally posted this in example app)

This may be fairly difficult to do this, but it might make sense in some apps to have the header bar stay in-place and fade its content as the tabs are swiping. Similar to a back-swipe (on iOS anyway). For example, if you have your apps logo in the middle of the header on all pages and you just want the icons in the header to change from one tab to another, it looks a little raw to have the header moving. Right now it kind of looks like one long bar across all the tabs.

One way to handle it could be with an attribute directive. You could add a certain attribute to any element you want to "stay in-place and fade" instead of sliding. That element would then get an opacity matching the current % of swipe and a negative/positive CSS transform/translateX to move it in the opposite direction of the slide so it appears to not be moving.

I just went in and re-skinned my app to get rid of all the header bars so the slide doesn't look weird on iOS. All the toolbars and the page backgrounds are now the same color, and not all at the top of the page anymore, it looks a lot cooler because the app wasn't really iOS-themed to begin with.

To make the tab bar background sync up with the page background, I added some code so that when you change tabs, the tab bar changes color. It may be cooler if the tabs had this ability built-in. Here's the way it's working right now:

CSS:

   super-tabs div.toolbar-background {
     transition: background-color linear .2s;
   }

HTML:

  <super-tabs no-shadow no-border [toolbarBackground]="bgcolor" (tabSelect)="onTabSelect($event)">
    <super-tab id="page1" [root]="tabPage1" icon="menu"></super-tab>
    <super-tab id="page2" [root]="tabPage2" icon="contacts"></super-tab>
    <super-tab id="page3" [root]="tabPage3" icon="settings"></super-tab>
  </super-tabs>

JS:

   onTabSelect(ev: any) {
 
     switch (ev.id) {
       case 'page1': this.bgcolor = 'primary'; break;
       case 'page2': this.bgcolor = 'dark'; break;
       case 'page3': this.bgcolor = 'danger'; break;
     }
   }

When you let go of the swipe or if you click a tab icon, the tab bar background does a quick transition to the new pages color.

If you could add [toolbarBackground] to the super-tab, then have the super-tabs listen to the selected tab's [toolbarBackground], I think this would take care of itself without having to be hard-coded like the above, instead it would be like so:

HTML:

  <super-tabs no-shadow no-border>
    <super-tab id="page1" [root]="tabPage1" icon="menu" toolbarBackground="primary"></super-tab>
    <super-tab id="page2" [root]="tabPage2" icon="contacts" toolbarBackground="dark"></super-tab>
    <super-tab id="page3" [root]="tabPage3" icon="settings" toolbarBackground="danger"></super-tab>
  </super-tabs>

I suppose the indicator color would need to work the same way, I don't show it on my app. Anyhow, I think this would make super-tabs even more super, but I can make it work as-is if you don't think it's a good fit.

When using regular slides with ionic you could quite easily detect changes in a component within a slide using an @input variable, changing the variable in the parent component could be picked up by ngOnchanges in the slide component.

Since the data is passed to tabs via NavParams I haven´t found a good way of detecting changes in the actual tabs pages after they are created.

Basically what I want to do is to have access to the selected tab index in the tabs and dynamically do some stuff when the current tab is selected.

It would be possible to solve without to much hassle with events.

• the page containing supertabs publishes the selected tab index and the underlying pages subscribes to the event.

Another solution would be to put it in a provider, having the parent page update a subject which the underlying pages subscribes to.

• Have I missed something, is this possible with they way super-tabs works right now?
• If not, are there any plans to implement this functionality.
• Does anyone have any other suggested solution to push data to the underlying pages after the tabs are created? Or which of the above solutions would be preferred?

It is working fine on new project but what is the steps to use it in my existing project with version 2.2.1.
I did following steps :-

1. Import in app.module.ts
   import { SuperTabsModule } from 'ionic2-super-tabs';
   in imports: [ SuperTabsModule.forRoot() ..]
2. in home.ts and home.html
   In both file i did same as git file .

My error is as following :-

Warning :-

npm WARN [email protected] requires a peer of ionic-angular@^3.0.0 but none was installed.

Typescript Error
Module '"/opt/lampp/htdocs/VendorIonic2/node_modules/@angular/core/index"' has no exported member 'Renderer2'.
node_modules/ionic2-super-tabs/dist/components/super-tabs/super-tabs.d.ts
import { AfterViewInit, ElementRef, OnInit, OnDestroy, Renderer2, AfterContentInit, EventEmitter } from '@angular/core';

********************* My configuration is as following **************

Ionic Framework: 2.3.0
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 6.9.4
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Looks like there is a small issue when using the selectedTabIndex attribute. I created a new project as a test and it happens as soon as you add that attribute, it can't render the initial view. Without the attribute, it seems to be fine loading the first tab.

<super-tabs tabsPlacement="bottom" [selectedTabIndex]="1">
  <super-tab [root]="tab1Root" title="Home" icon="home"></super-tab>
  <super-tab [root]="tab2Root" title="About" icon="information-circle"></super-tab>
  <super-tab [root]="tab3Root" title="Contact" icon="contacts"></super-tab>
</super-tabs>

The error:

Uncaught (in promise): TypeError: undefined is not an object (evaluating 'this.indicator.nativeElement')
setIndicatorPosition@http://localhost:8101/build/main.js:78456:44
alignIndicatorPosition@http://localhost:8101/build/main.js:56672:46
set@http://localhost:8101/build/main.js:56421:40
updateProp@http://localhost:8101/build/main.js:11302:26
checkAndUpdateDirectiveInline@http://localhost:8101/build/main.js:11000:29
checkAndUpdateNodeInline@http://localhost:8101/build/main.js:12416:46
debugCheckAndUpdateNode@http://localhost:8101/build/main.js:13013:64
debugCheckDirectivesFn@http://localhost:8101/build/main.js:12954:36

checkAndUpdateView@http://localhost:8101/build/main.js:12351:30
callViewAction@http://localhost:8101/build/main.js:12666:35
execComponentViewsAction@http://localhost:8101/build/main.js:12612:27
checkAndUpdateView@http://localhost:8101/build/main.js:12357:29
callWithDebugContext@http://localhost:8101/build/main.js:13339:47
detectChanges@http://localhost:8101/build/main.js:10449:81
_viewAttachToDOM@http://localhost:8101/build/main.js:44216:53
_transitionInit@http://localhost:8101/build/main.js:44319:34
_postViewInit@http://localhost:8101/build/main.js:44171:29
_queueTrns@http://localhost:8101/build/main.js:43960:23
onInvoke@http://localhost:8101/build/main.js:4424:43
run@http://localhost:8101/build/polyfills.js:3:9747
http://localhost:8101/build/polyfills.js:3:6777
onInvokeTask@http://localhost:8101/build/main.js:4415:47
runTask@http://localhost:8101/build/polyfills.js:3:10400
a@http://localhost:8101/build/polyfills.js:3:5320
promiseReactionJob@[native code]

Also perhaps it should just be [selectedTab] and you can pass either an index or an id?

Thanks for all the great work, this module is really coming together nicely.

When there is an ion-slide inside the ion-content of a swipeable tab, it wouldn't slide.
Apparently only the root slide captures the swipe event.

Here is an image of a sample use case for horizontal ion-slide inside ion-content:

I have an Ionic-refresher on 2 supertabs, just after the ION-CONTENT tag. The first time entering either tab the refresher works perfectly, but if you go to another tab and come back the refresher is not rendered and isn't firing properly.

TABS Template

<ion-header no-shadow no-border>
        <ion-navbar>
                <button ion-button icon-only  menuToggle>
                        <ion-icon name="menu"></ion-icon>
                </button>
        </ion-navbar>
</ion-header>
<ion-content no-bounce>
        <super-tabs [config]="{sideMenu: 'left', sideMenuThreshold: 10}">
                <super-tab *ngFor="let tab of tabs" [title]="tab.title" [root]="tab.root"></super-tab>
        </super-tabs>
</ion-content>

TAB Template

<ion-content fullscreen class="card-background-page">
    <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
            pullingIcon="refresh"
            pullingText="Refresh stuff"
            refreshingSpinner="circles"
            refreshingText="Getting awesome stuff...">
    </ion-refresher-content>
  </ion-refresher>
  <div>
        <ion-card *ngFor="let cat of category">
                <div [style]="cat.colour" class="card-header">
                    <ion-row>
                        <ion-col>
                            <ion-avatar item-left>
                                <img [src]="cat.img">
                            </ion-avatar>
                        </ion-col>
                        <ion-col style="text-align:right;">
                            <h1>{{cat.desc}}</h1>
                        </ion-col>
                    </ion-row>
                </div>
                <p></p>
                <ion-card-content class="card-content">
                    <p><ion-icon name="time" isActive="false"></ion-icon> {{cat.dates}}</p>
                </ion-card-content>
        </ion-card>
    </div>
</ion-content>

TypeScript

 doRefresh(refresh){
   console.log(refresh);
    this.service.reload().then( () => {
      this.category = this.service.getCategories();
      console.log(this.category);
      refresh.complete();
    });
 }
}

If you go to the first tab, pull down it calls the doRefresh($event) and the new category array works. Swipe over to the new other tab and back then the refresh-content is not displayed on pull down and the ngFor doesn't seem to be fired properly, even though the doRefresh is being called.

ordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.1
Xcode version: Not installed

"ionic2-super-tabs": "^2.2.2",

It is possible to swipe into an empty space - if you swipe hard enough :)
I was just curious as to how far the whitespace at the end would go, then realized that beyond a certain point the slide gets locked in to the right.

The content seems locked in to the right and does not return. It is still scrollable and below is a second screenshot after a scroll:

Hi ,
I want to show 0 on badge but it is not showing .. if I use badge="1" then it is showing . What to do ?

I discovered that it wasn't allowing SwipeBack on ios when navigating within the child ion-nav. If you have more than 1 active ion-nav it doesn't allow it.

I made the following changes to super-tabs.js to enable it:

1. Add a new property:
   this.sliding = false;

2. Turn this flag when we're dragging:
   SuperTabsComponent.prototype.onDrag = function (ev) { ... this.sliding = true; };

3. Turn off once it's stopped:
   SuperTabsComponent.prototype.onSlideDidChange = function () { ... this.sliding = false; };

4. Hide navs if not active:
   <ion-nav *ngIf=\"sliding || selectedTabIndex == i || (selectedTabIndex > (tabs.length - 1) && i == (tabs.length - 1))\" [root]=\"tab.tabRoot\" [rootParams]=\"tab.navParams\"></ion-nav>\n

At the moment, only touch events are captured, which is ideal. Some developers might want the slides to listen to mouse events as well (treat them as touch events). The config input should accept an option to enable this.

Hello,
i tried to add no-border on ion-header but it looks like its overriding the bottom border and shadow, is there a way to remove shadow/border?

Thanks

I like super-tabs , can you add scrollable tabs feature to it ?
such as: Ionic2-ScrollableTabs
react-native-scrollable-tab-view

I try to use super-tabs as described, but I get an error:

ERROR Error: Uncaught (in promise): Error: No provider for Tabs!

Tried to add super-tabs to providers, this did not solve the problem.

I have a list of Youtube Api videos. When I use ionic 2-super-tabs v1.1.1, fine. But when I use ionic2-super-tabs v2.2.2 and change another tab, my list does not change when I come back and I'm searching for another video.

V1.1.1
http://granadillacompany.com/super_tabs_v1.gif

V2.2.2
http://granadillacompany.com/super_tabs_v2.gif

Vertical list scrolling make tabs don't swipeable.
It need to click on item to enable swiping again.

And if it "super" tabs, it will be better to add customization for each tab (not for whole super-tabs component) to make it possible to change color of badge and icon.

Hey everyone,

I'm working on a big update for this module. There has been lots of progress already and I'm sure you will all love the results. This issue is to track the progress, I will update the related issues once I push the commit and release the next version.

Features

• Allow tabs scrolling
  • Can have many tabs with a tab bar that's expanded and scrolls automatically on tab change
  • Can manually scroll through the available tabs
• Allow swipe-back on iOS (issue #4)
• Allow swiping on top of the tab contents to open side menu (issue #10)
• Allow disabling/enabling swiping (issue #2)
  • Global setting
  • Per tab setting
• Allow programmatic navigation to a specific tab (issue #3)
• Add badges for tabs (issue #6)
• Add ability to show/hide tab-bar (issue #1)
• Add ability to specify tabs position, or respect the global Ionic config (top/bottom tabs) (issue #9)
• Output tabSelect event

Bug fixes

• Empty tab at the end
• Fix issues with part of the tab bar hiding when scrolling to the bottom of the page
• Fix issues caused when switching screen orientation
• Fix issue where ion-slides gets stuck between two slides (tabs). It will navigate to the closest tab when this occurs.
• Fix issue with indicator width not being updated when orientation changes (issue #11)

Other

• Disable overswiping (at the beginning and end of the tabs)
• Improve animation performance
• Create custom code instead of using ion-slides

What the upcoming version is like

1. There will be a provider SuperTabsController that will be used to:
   • enable/disable swiping for all tabs or when a specific tab is selected
   • increase/decrease/clear badge for a specific tab
   • enable/disable a tab (might not be included in initial v2 release)
2. The main Module will have a static forRoot method.
3. Each tab will accept an id attribute so you can use it in any of the SuperTabsController methods.

Breaking Changes

Removed inputs

• rootNavCtrl: the root NavController is now automatically added to the NavParams

Renamed Inputs

• SuperTabs component:

  • sliderColor -> indicatorColor
  • toolbarColor -> toolbarBackground
  • tabsColor -> toolbarColor

• SuperTab component:

  • tabRoot -> root
  • navParams -> rootParams

Other

• SuperTabs component height input no longer takes a string. It takes a number of pixels instead. You most likely will not need to use this input since the height now defaults to 100%. So it will take 100% of it's container's height.

Upgrade instructions

• Rename any input values as needed (see breaking changes above)
• Remove the height input value
• Import SuperTabs.forRoot() instead of SuperTabs in your app's main module.

is available to put badge in?

I have updated my application to latest ionic release which is 3.2.0 with angular version 4.1.0

before that everything was working fine but,

now I started facing a problem specially when I add scrollTabs attribute to <super-tabs scrollTabs>

Error

Uncaught TypeError: Cannot read property 'nativeElement' of undefined

Here is good code:

<super-tabs>
    <super-tab [root]="page1" title="First page"></super-tab>
    <super-tab [root]="page2" title="Second page"></super-tab>
    ...
  </super-tabs>

Broken Code with scrollTabs:

<super-tabs scrollTabs>
    <super-tab [root]="page1" title="First page"></super-tab>
    <super-tab [root]="page2" title="Second page"></super-tab>
    ...
  </super-tabs>

Suggest creating a controller that could be used to change the active tab, and navigate to specific page at the same time:

import { SuperTabsController } from 'ionic2-super-tabs';
import { SettingsPage } from './settings.page';

@Component({
  selector: 'page-home',
  template: '<ion-content><button (click)="goToSettings()">Settings</button></ion-content>',
})
export class HomePage {

  constructor(private tabsCtrl: SuperTabsController) {}

  goToSettings() {

    this.tabsCtrl.push('optional tab ID', SettingsPage, { userid: this.user.id }, { animate: true });
  }
}

Basically, if that tab was already the active tab then it just goes to the new page. If not, then it goes to the new page and then slides the tab into place.

This is an awesome project btw. 👍

I couldn't find it in the documentation, but I'm sure I might have missed something.

These are a few of the defaults that I found were slightly off (for fixed tabs) from the spec. I think it would be best if some of these attributes are user-configurable.

• Height: 48px
• Padding on left/right of text: 12px
• Larger screens (desktop in the guidelines):
  • Centered/left-aligned to side menu button
  • Text size: 13px
  • Padding on left/right of text: 24px

Thank you for your efforts! These minor design fixes would make the library even better.

Is possible to make this work for ionic 3 ?

When I rotate mobile then its performance is very lazy ,and screen menu is not looking good on landscape mode,

Other thing is that tab touch performance is very bad when i am getting response from api :(

Hi,
Thank you for this amazing development!
I'm trying to use super-tabs together with split-pane, it works (it can be swapped) but the tabs row disappear.

I have tested it with the official conference template, installing super-tabs via npm, including it at app.module.ts and replacing the tabs html template as follows:

<ion-tabs [selectedIndex]="mySelectedIndex">
  <ion-tab [root]="tab1Root" tabTitle="Schedule" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Speakers" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Map" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

has been replaced with

<super-tabs>
  <super-tab [root]="tab1Root" tabTitle="Schedule" tabIcon="calendar"></super-tab>
  <super-tab [root]="tab2Root" tabTitle="Speakers" tabIcon="contacts"></super-tab>
  <super-tab [root]="tab3Root" tabTitle="Map" tabIcon="map"></super-tab>
  <super-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></super-tab>
</super-tabs>

It is possible to provide an example at git using this template and super tabs??

Thank you so much in advance!!

When used on a page with tabs, ionic will automatically add a bottom margin on one of the divs, the problems is that ionic is adding this bottom margin to the inner <ion-content> used by super tabs as well

To reproduce:

• Add supertabs to a simple tabs starter template
• Add a ion-list or similar with enough items to go below the screen
• Scroll down to the bottom
• Scroll up

It seems the style is added to 2 <div> elements under the <ion-content>.

I believe it has to do with the header and footer since the same style is applied to the outer <ion-content>

It´s possible to remove the bottom with the following CSS on the super-tabs page

.fixed-content {
        margin-bottom: 0px !important;
    }
.scroll-content {
        margin-bottom: 0px !important;
    }