kirillgroshkov commented 5 years ago

I searched and couldn't find an issue about that.

I've seen that master branch is a WIP to achieve that. So, I guess I'll just leave this issue here to track the progress (unless I'm missing something).

ps: if there's something that we (community) can help with (something small and separate) - please tell!

Otherwise, we're kind of blocked to upgrade to Ionic4 unless this package is updated.

anuj9196 commented 5 years ago

Also waiting for ionic4 support.

Pingolus commented 5 years ago

Yea super-tabs are just 10x better than default ionic tabs ! Hope one day this plugin will be part of ionic core widgets ? Just waiting for it I migrated to ionic 4 and now I'm using defaults tabs : hope to change it quickly to super tabs because it rocks ! Thank's for this plugin because It's a big lack on ionic !

pipoa commented 5 years ago

@ihadeed I really appreciate your hard work for ionic2-super-tabs. After tried ionic2-super-tabs v5.2.0 in Ionic v4, I got errors below: Module not found: Error: Can't resolve 'ionic-angular' in xxxxxx/node_modules/ionic2-super-tabs

Wish you can help on this soon when your are free. Many thanks ^_^.

anuj9196 commented 5 years ago

@pipoa This issue is due to version incompatibility of ionic and the way ionic is imported in ionic3 and ionic4.

Wait for Ionoc4 support.

Pingolus commented 5 years ago

Thank's a lot @ihadeed If you need some help (for testing purposes per example), don't hesitate to ask us.

ihadeed commented 5 years ago

@Pingolus thank you!

The new version is almost ready for beta testing, I will make sure to post an update here when I have a shipped package that can be installed. Expect something over this weekend.

ihadeed commented 5 years ago

Update: most of the major features are implemented. The tabs are functional, swipeable, dyanmic, and have the option for a scrollable toolbar.

https://youtu.be/jZdl1gAWwf0

Will work on compiling a shippable Angular 7 package now.

ihadeed commented 5 years ago

Update:

Just published @ionic-super-tabs/core and @ionic-super-tabs/angular.

There is an issue with the way it exports typings, can't seem to figure out why, so until it's fixed you will need to do this work around (which shouldn't impact your app negatively).

Edit your app's tsconfig.json and add this to the end of it, if your already have an "include" or "files" tag, you can just add this additional file to it.

{
   ...
  "include": [
    "src",
    "node_modules/@ionic-super-tabs/core/dist/types/components.d.ts"
  ]
}

The example project is being updated/rebuilt: https://github.com/zyra/ionic2-super-tabs-example/tree/v7

A quick getting started guide:

# Angular
npm i -S @ionic-super-tabs/angular

# Non angular
npm i -S @ionic-super-tabs/core

// Angular only

// App.module.ts
import { SuperTabsModule } from '@ionic-super-tabs/angular'

@NgModule({ 
 ... 
  imports: [
    ...
    SuperTabsModule.forRoot(),
  ]
})

// your lazy loaded module
@NgModule({
   ...
   imports: [
     ...,
     SuperTabsModule,
   ]
})

<super-tabs>
  <super-tabs-toolbar position="top">
    <super-tab-button>
       <ion-icon name="flame">
       <ion-label>Hello</ion-label>
    </super-tab-button>
    <super-tab-button>
       <ion-icon name="call">
       <ion-label>World</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>
  <super-tabs-container>
    <super-tab>
       Im a custom page
    </super-tab>
    <super-tab>
       <ion-nav root="some page" />
    </super-tab>
  <super-tabs-container>
</super-tabs>

dennissch commented 5 years ago

Thanks @ihadeed! I've added Super Tabs in addition to the normal ion-tab. It works as expected :)

screen

I recognized the following:

TabChange event is not sent (<super-tabs (tabChange)="onTabChange($event)">). Also tested activeTabChange, activeTabIndexChange and selectedTabIndexChange. All events do not seem to work properly yet.
I was not able to layout the super-tab-indicator component, all settings are hidden behind the shadow root (eg. --st-indicator-position-x: 0px; --st-indicator-scale-x: 1.02; --st-indicator-transition-duration: 300ms; background: ...)

I could not integrate SuperTabs programmatically.

constructor(
private supertabs: SuperTabs
) { 
console.log('activeTabIndex', this.supertabs.activeTabIndex );
}

ChatTabsPage_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[ChatTabsPage -> SuperTabs]: 
StaticInjectorError(Platform: core)[ChatTabsPage -> SuperTabs]: 
NullInjectorError: No provider for SuperTabs!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)

I am looking forward to the next update and thank you for the great work.

paulovargatt commented 5 years ago

Thanks for the update! I was unable to retrieve the tabChange event ...

How is navigation to other pages using RouterLink?

What is the best way to enable lazyloading for tabs?

pipoa commented 5 years ago

@ihadeed I love you so much and I love super-tabs either. Thanks for your quickly update and response, I will try it today or tomorrow. many thanks~

pipoa commented 5 years ago

I already have super-tabs worked with tabChange event(detail:.. ) and styling, but with 2 important problems unsolved below:

in the case that super-tab-button(s) are totally wider then super-tabs-toolbar, no overflow scroll available.
don't know how to programmatically set tab selected, is there [(selectedTabIndex)]?

ihadeed commented 5 years ago

@dennissch

Events should be working now
The CSS variables you mentioned are for internal use and not meant for customizations. The docs are now updated (check redme.md files in each component directory) to show all the available CSS variables.

You can get an instance of SuperTabs by using .querySelector() function in vanilla JS, or @ViewChild() decorator in Angular. Examples:


// Vanilla
const superTabs = document.querySelector('super-tabs'); // Instead of document you can use any HTML element, and instead of `super-tabs` you can use another unique selector

// Angular import { ViewChild } from '@angular/core'; import { SuperTabsComponent } from '@ionic-super-tabs/core'; ...

@ViewChild(SuperTabsComponent) superTabs: SuperTabsComponent;



<br><br>

---

<br><br>

@paulovargatt 

1. Events are updated and documented now.
2. Deep linking / Angular router support is not available as of now. Not sure if it will be part of this module. Would like to know what use cases you may have though.
3. There are no lazy loading capabilities yet. Will definitely explore this feature.

<br><br>
---
<br><br>

@pipoa 
1. You have to set `scrollable` attribute to `true` on the toolbar component. See https://github.com/zyra/ionic-super-tabs/tree/master/core/src/super-tabs-toolbar#properties
2. There is a method for that https://github.com/zyra/ionic-super-tabs/tree/master/core/src/super-tabs#selecttabindex-number-animate-boolean--void

dennissch commented 5 years ago

thanks @ihadeed, I've tested the newest version (6.0.0-beta.8) and generate production builds for iOS and Android (through Ionic AppFlow). Everything works on an Android device, but on iOS I only see a white area. Does anyone have an idea? In the console, as well as during the build process, no errors were thrown.

(swipe is not working, but I can click on each tab)

pipoa commented 5 years ago

thanks @ihadeed, I just want to set one specified page active when enter a page. I cannot make activeTabIndex work, and even cannot identify which tab is current selected tab? Is there an attribute-way to make tab selected?

NgYueHong commented 5 years ago

@ihadeed Awesome plugin!!! When will the ionic 4 support ready?

Pingolus commented 5 years ago

Thank's ! Two remarks :

I just run super-tabs-example and routing seems not completed (I imagine it's a known issue)
I have somme troubles installing new version on my existing ionic project : 'super-tab-button' is not a known element. I'm looking on that (I already added supertabs to app.module.ts file as the example shows it)

WHeesters commented 5 years ago

The plugin works great on Android, unfortunately I've got the same problem as @dennissch. On iOS I only see a blank screen.

maeisdev commented 5 years ago

Great work, but I have several problems with this.

On iOS pages in tabs are not displayed
On iOS sliding is working only from left to right, and it always sliding to the first tab
On iPhone X should be bigger margin, while tabbar is on the bottom

I will follow the topic and use this repository as it will be relatively stable. But currently only the ionic tabs remain.

Pingolus commented 5 years ago

Hi, Any news about ionic 4 compatibility ? Thanks

stinaa commented 5 years ago

I submitted a PR with a fix for the blank page issue affecting Safari on all platforms. https://github.com/zyra/ionic-super-tabs/pull/379 🤓

Pingolus commented 5 years ago

Hi, Can we help you to release ionic 4 support ? Is there a blocked task, anything we can do ? I kown it's open source & free dev, so I understand it's not a priority. But I hoped it'll be available in April as you wrote 12 April. Is it still in progress ? Don't hesitate asking for help.

ihadeed commented 5 years ago

@Pingolus

The latest version 6.0.0-beta.10 is stable enough, but the iOS performance is poor.

Will need to revise the usage of QueueApi / requestAnimationFrame to figure out what the issues are.

Most of the animations aren't working properly on iOS at the moment; but the module is usable overall and is still somewhat better than the plain framework tabs.

Pingolus commented 5 years ago

Hi @ihadeed , thank's for your reply.

The latest version 6.0.0-beta.10 is stable enough, but the iOS performance is poor.

What do you mean by "poor" ? I'll try beta version ; but I worry about that and about the fact that there're some bug reported.. I'd like to use only stable and tested packages on production. Last time I tried the example project which was no working at all (some weeks ago).

Thanks a lot for your work.

EDIT : I tried beta ; it works like a charm ! =) I just have an issue with ion refresh with iOS ; I'll create another topic for that.

pipoa commented 5 years ago

@Pingolus

The latest version 6.0.0-beta.10 is stable enough, but the iOS performance is poor.

Will need to revise the usage of QueueApi / requestAnimationFrame to figure out what the issues are.

Most of the animations aren't working properly on iOS at the moment; but the module is usable overall and is still somewhat better than the plain framework tabs.

Instead 6.0.0-beta.10 I use 6.0.0-beta.9 , because 6.0.0-beta.10 looks a little weird when swipe between tabs.
However, if content in super-tab is longer then just a page, finger swipe becomes very weird and unstable too in 6.0.0-beta.9. Pages float up and down, shaking left and right, and very easy stay in the middle between switch pages. In the mean while tap tab to swipe is ok, the swipe animation is smooth.

rajabmohammadi commented 5 years ago

@ihadeed I have this error when I dynamic the super-tabs Please help me ** HTML `

<super-tabs-container>
  <super-tab *ngFor="let item of content">{{item}}</super-tab>
</super-tabs-container>

typescript content:["conten1","conten2","conten3","conten4","conten5","conten6","conten7","conten8"] items:["item1","item2","item3","item4","item5","item6","item7","item8"]`

TypeError: Cannot set property 'active' of undefined
TypeError: Cannot set property 'active' of undefined
    at SuperTabsToolbarComponent.push../node_modules/@ionic-super-tabs/core/dist/esm/legacy/super-tab-button_2.entry.js.SuperTabsToolbarComponent.markButtonActive (super-tab-button_2.entry.js:249)

**

TomWaterz commented 5 years ago

Is npm i -S @ionic-super-tabs/angular the newest version?

It doesn't have a lot of the files that I see in the current release. How do I put the newest beta release into my node_modules?

Pingolus commented 5 years ago

I decided to move on, because I can't wait more. I noticed a bug on iOS one month ago and there's no activity and I can't solve it myself.

I also have performances issues with Android.

So, for me it's not ready for production purposes.

So thank's for your job ; but I suppose you don't have so much time to maintain this plugin and it can't be a bottleneck for me.

For people who are looking for a solution as I was ; I decided to move to ionic segments and slides ; moving from pages to components.

You have to consider that you can't do lazy loading with components but your tabs are encapsulated into a page.

BUT now my app is really faster than before and sliding is working perfectly on both iOS and Android platforms.

Don't go this way if you have a lot of pages or if your pages are wery big.

tabs.page.ts:

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  @ViewChild(IonSlides) slides: IonSlides;
  @ViewChild(IonSegment) segment: IonSegment;

  segmentChanged(ev: any) {
    if(this.slides.getActiveIndex() != ev.detail.value) {
      this.slides.slideTo(ev.detail.value);
    }
  }

  slideChanged() {
    this.slides.getActiveIndex().then(index => {
      if (index != parseInt(this.segment.value)) {
        this.segment.value = index.toString();
      }
    });
  }
}

tabs.page.html (I am using md mode even for iOS ; juste remove mode='md' if you prefer keeping both styles)

<ion-header>
  <ion-toolbar color="primary" mode="md">
    <ion-segment scrollable (ionChange)="segmentChanged($event)" mode="md">
      <ion-segment-button value="0" checked mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1" mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="2" mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-slides (ionSlideDidChange)="slideChanged()" [options]="{autoHeight: true}">
    <ion-slide class="slide-1">
      <app-component-1></app-component-1>
    </ion-slide>
    <ion-slide class="slide-2">
      <app-component-2></app-component-2>
    </ion-slide>
    <ion-slide class="slide-3">
      <app-component-3></app-component-3>
    </ion-slide>
  </ion-slides>
</ion-content>

tabs.page.scss

ion-slides {
  min-height:100%;
  height: auto;
}

Hope this could help.

digat commented 5 years ago

I decided to move on, because I can't wait more. I noticed a bug on iOS one month ago and there's no activity and I can't solve it myself.

I also have performances issues with Android.

So, for me it's not ready for production purposes.

So thank's for your job ; but I suppose you don't have so much time to maintain this plugin and it can't be a bottleneck for me.

For people who are looking for a solution as I was ; I decided to move to ionic segments and slides ; moving from pages to components.

You have to consider that you can't do lazy loading with components but your tabs are encapsulated into a page.

BUT now my app is really faster than before and sliding is working perfectly on both iOS and Android platforms.

Don't go this way if you have a lot of pages or if your pages are wery big.

tabs.page.ts:
@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  @ViewChild(IonSlides) slides: IonSlides;
  @ViewChild(IonSegment) segment: IonSegment;

  segmentChanged(ev: any) {
    if(this.slides.getActiveIndex() != ev.detail.value) {
      this.slides.slideTo(ev.detail.value);
    }
  }

  slideChanged() {
    this.slides.getActiveIndex().then(index => {
      if (index != parseInt(this.segment.value)) {
        this.segment.value = index.toString();
      }
    });
  }
}
tabs.page.html (I am using md mode even for iOS ; juste remove mode='md' if you prefer keeping both styles)
<ion-header>
  <ion-toolbar color="primary" mode="md">
    <ion-segment scrollable (ionChange)="segmentChanged($event)" mode="md">
      <ion-segment-button value="0" checked mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1" mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="2" mode="md">
        <ion-icon name="..."></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-slides (ionSlideDidChange)="slideChanged()" [options]="{autoHeight: true}">
    <ion-slide class="slide-1">
      <app-component-1></app-component-1>
    </ion-slide>
    <ion-slide class="slide-2">
      <app-component-2></app-component-2>
    </ion-slide>
    <ion-slide class="slide-3">
      <app-component-3></app-component-3>
    </ion-slide>
  </ion-slides>
</ion-content>
tabs.page.scss
ion-slides {
  min-height:100%;
  height: auto;
}
Hope this could help.

Do you have a live Example or a github for such implementation if you don't mind ?

Pingolus commented 5 years ago

Sorry I don't, but you have lot of examples or people working on it on stack overflow.

I just had some difficulties to handle auto sizing (because I have dynamic data enhancing one of my slide height) & I discovered a bug if you flood segments buttons ; segments and slides are not synchronized events seems not working anymore. But it's not a "normal" usage so for me this is not a real problem.

utbhavesh commented 5 years ago

I have

Update:

Just published @ionic-super-tabs/core and @ionic-super-tabs/angular.

There is an issue with the way it exports typings, can't seem to figure out why, so until it's fixed you will need to do this work around (which shouldn't impact your app negatively).

Edit your app's tsconfig.json and add this to the end of it, if your already have an "include" or "files" tag, you can just add this additional file to it.
{
   ...
  "include": [
    "src",
    "node_modules/@ionic-super-tabs/core/dist/types/components.d.ts"
  ]
}
The example project is being updated/rebuilt: https://github.com/zyra/ionic2-super-tabs-example/tree/v7

A quick getting started guide:
# Angular
npm i -S @ionic-super-tabs/angular

# Non angular
npm i -S @ionic-super-tabs/core
// Angular only

// App.module.ts
import { SuperTabsModule } from '@ionic-super-tabs/angular'

@NgModule({ 
 ... 
  imports: [
    ...
    SuperTabsModule.forRoot(),
  ]
})

// your lazy loaded module
@NgModule({
   ...
   imports: [
     ...,
     SuperTabsModule,
   ]
})
<super-tabs>
  <super-tabs-toolbar position="top">
    <super-tab-button>
       <ion-icon name="flame">
       <ion-label>Hello</ion-label>
    </super-tab-button>
    <super-tab-button>
       <ion-icon name="call">
       <ion-label>World</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>
  <super-tabs-container>
    <super-tab>
       Im a custom page
    </super-tab>
    <super-tab>
       <ion-nav root="some page" />
    </super-tab>
  <super-tabs-container>
</super-tabs>
I am using ionic 4 angular I have followed with the steps mentioned above, and also made change in the tsconfig.json file At the time of installing the ionic-super-tab, the version installed was 7.0.0 alpha-6

Every thing was fine, but after I tried to build the app, I got with the below compile time error: "ERROR in ./node_modules/@ionic-super-tabs/angular/dist/fesm5.js Module not found: Error: Can't resolve '@ionic-super-tabs/core/dist/types/components' in '\node_modules\@ionic-super-tabs\angular\dist' [ERROR] An error occurred while running subprocess ng."

Update: It is working with v6.0.0-beta.10 While installing the npm package module be sure to mention the version name untill a proper support get available

ihadeed commented 5 years ago

New version is released. Fixes many performance issues, iOS related issues, and some minor things related to window resizing (or orientation change).

Upgrade steps

Install one of these packages


# Angular
npm i -S @ionic-super-tabs/angular@^6.0.0-rc.0

Vanilla

npm i -S @ionic-super-tabs/core@^6.0.0-rc.0


2. Remove that extra line we added to `tsconfig.json` _(See my previous comment in this issue https://github.com/zyra/ionic-super-tabs/issues/366#issuecomment-475933068)_

ezrayeoh commented 5 years ago

@dennissch posted an issue refering to this unable to swipe. any updates bout this?

ihadeed commented 5 years ago

@ezrayeoh @dennissch

I just tested the ionic-super-tabs-example project by running npx ng serve --prod and opened the app on an iPhone 7+. Swiping worked fine on Chrome & Safari.

I only noticed a minor issue on Chrome iOS with the toolbar indicator. During a transition to a new tab (after swipe end, or after pressing one of the toolbar buttons) the indicator moves immediately to the new position without animating. Everything else seemed fine.

I didn't get a chance to test it on a native iOS app yet, if anyone gets to it before me I'd love to get some feedback.

aleygues commented 5 years ago

HI @ihadeed,

Thanks for the update! It's looking really better on iOS.

From my point of view, this is still not production ready because of the iOS behavior. I found 2 main bugs by playing with the ionic-super-tabs-example project (ionic serve --prod) on Safari (iOS 12.4, iPhone X):

during the swype (dragging), I'm able to scroll top/bottom the view, creating a weird blank space between the Supertabs Toolbar and the page Title. This give me a really weird feeling since I'm able to move in 4 directions.
sometimes, swiping from page 3 back to 2 by a quick move to the left, I got stuck between 2 pages. I have the feeling this is mainly because of the list items buttons that interfer with the swype.

Maybe I'll have some time by the end of August to take a look at these pbs if I can help somehow.

Edit: I just made some tests on iPhone 6S Plus (iOS 12.4, Safari), the plugin is working really better than on iPhone X. I reproduced the 1st bug with a lot of efforts (swyping left/right and during the swype, trying to scroll up/down), here is a screen shot:

I didn't manage to reproduce the 2nd bug. I also found something else: when I click on an item of the list on the 3rd page, and then scroll the list down, sometimes it's not working and it's trying to click another item instead. I don't know if it's clear enough, neither if it's related to your plugin.

Great job btw.

dennissch commented 5 years ago

Thanks @ihadeed

The performance on iOS is really good, only a few discrepancies I observed. Swiping to the left and right works very well, clicking on the tabbar too.

When swiping down, sometimes it moves the tabbar. Which also show a short flicker when using the Ionic Refresher.

super-tabs-tabbar

Under Android, the content is not changed, it only changes the tabbar. Does anyone have an idea?

super-tabs-android

EDIT: I was able to identify the following error message in the browser console, TypeError: Cannot read property 'getRootScrollableEl' of undefined.

typevar-issue

EDIT: I was able to reproduce the error. If there are multiple Super-Tabs instances in the app, the first one always fails. The first Super-Tabs instance does not change the content (as described above), but when another Super-Tabs instance is opened, everything works. It does not matter which instance is opened first.

Config:

public config: SuperTabsConfig = {
    maxDragAngle: 40,
    dragThreshold: 20,
    allowElementScroll: true,
    transitionDuration: 150,
    sideMenu: 'left',
    sideMenuThreshold: 50,
    shortSwipeDuration: 260
};

Template:

<super-tabs [config]="config" (tabChange)="onTabChange($event)">
    <super-tabs-toolbar scrollable="false" scrollablePadding="false">
        <super-tab-button>
            <ion-label>Informationen</ion-label>
        </super-tab-button>
        <super-tab-button>
            <ion-label>Bilder</ion-label>
        </super-tab-button>
        <super-tab-button>
            <ion-label>Video Botschaft</ion-label>
        </super-tab-button>
    </super-tabs-toolbar>

    <super-tabs-container autoScrollTop="true" swipeEnabled="true">
        <super-tab>
            <ion-nav [root]="settingsProfilePage"></ion-nav>
        </super-tab>
        <super-tab>
            <ion-nav [root]="settingsImagesPage"></ion-nav>
        </super-tab>
        <super-tab>
            <ion-nav [root]="settingsVideosPage"></ion-nav>
        </super-tab>
    </super-tabs-container>
</super-tabs>

ezrayeoh commented 5 years ago

@dennissch i notice that if the app is rotated horizontally and back vertically (change sizes), the problem doesn't occur. Is the problem affected by the screen size?

dennissch commented 5 years ago

@ezrayeoh @ihadeed The issue always occurs when the content height is smaller than the visible area. You have to scroll down a bit first (if there is enough content), then the tabbar stays in the correct position (and does not move down).

dennissch commented 5 years ago

I also noticed the following: If super-tabs-toolbar has been initialized with the option scrollable="true" and programmatically a tab is selected, the indicator is positioned incorrectly (pressed to the right edge).

...
@ViewChild(SuperTabs, { static: false }) superTabs: SuperTabs;
...
ngAfterViewInit() {
    this.superTabs.selectTab(2);
}

...
<super-tabs [config]="config" (tabChange)="onTabChange($event)">
    <super-tabs-toolbar scrollable="true" scrollablePadding="false">
....

supertabs-issie-indicator

utbhavesh commented 5 years ago

With

Angular

npm i -S @ionic-super-tabs/angular@^6.0.0-rc.0

I am not able to swipe the super-tabs-container, also I am not able to change content when I click on the super-tab-button in super-tabs-toolbar

aleygues commented 5 years ago

@utbhavesh I had the same problem, the only way is to build using the --prod flag to make it work correctly.

dennissch commented 5 years ago

I am not able to swipe the super-tabs-container, also I am not able to change content when I click on the super-tab-button in super-tabs-toolbar

@ihadeed @utbhavesh After some trying, I was able to narrow down the issue. It seems that SuperTabs are loaded before the document. With the SetTimeout workaround swiping works again.

/node_modules/@ionic-super-tabs/core/dist/esm/super-tab_3.entry.js

...
async componentWillLoad() {

    if (this.config) {
        await this.setConfig(this.config);
    }

    setTimeout(async () => { // XXX

        this.debug('componentWillLoad fired');
        // index children
        this.indexChildren();
        // set the selected tab so the toolbar & container are aligned and in sync
        this.selectTab(this.activeTabIndex);
        // setup event listeners so we can synchronize child components
        // 1. listen to selectedTabIndex changes emitted by the container.
        this.el.addEventListener('selectedTabIndexChange', this.onContainerSelectedTabChange.bind(this));
        // 2. listen to activeTabIndex changes emitted by the container
        this.el.addEventListener('activeTabIndexChange', this.onContainerActiveTabChange.bind(this));
        // 3. listen to tab button clicks emitted by the toolbar
        this.el.addEventListener('buttonClick', this.onToolbarButtonClick.bind(this));

    }, 1000);
}
...

aditbharadwaj commented 4 years ago

I am not able to swipe the super-tabs-container, also I am not able to change content when I click on the super-tab-button in super-tabs-toolbar

@ihadeed @utbhavesh After some trying, I was able to narrow down the issue. It seems that SuperTabs are loaded before the document. With the SetTimeout workaround swiping works again.

/node_modules/@ionic-super-tabs/core/dist/esm/super-tab_3.entry.js

...
async componentWillLoad() {

    if (this.config) {
        await this.setConfig(this.config);
    }

    setTimeout(async () => { // XXX

        this.debug('componentWillLoad fired');
        // index children
        this.indexChildren();
        // set the selected tab so the toolbar & container are aligned and in sync
        this.selectTab(this.activeTabIndex);
        // setup event listeners so we can synchronize child components
        // 1. listen to selectedTabIndex changes emitted by the container.
        this.el.addEventListener('selectedTabIndexChange', this.onContainerSelectedTabChange.bind(this));
        // 2. listen to activeTabIndex changes emitted by the container
        this.el.addEventListener('activeTabIndexChange', this.onContainerActiveTabChange.bind(this));
        // 3. listen to tab button clicks emitted by the toolbar
        this.el.addEventListener('buttonClick', this.onToolbarButtonClick.bind(this));

    }, 1000);
}
...

yep the settimeout on this solved the issue , i was not able to switch tabs through gestures or click when i restart the app as the toolbar loads before. now it works again on reloading the app or re-logging ( in my app scenario)

ihadeed commented 4 years ago

@dennissch thanks for the update!

Does it work with requestAnimationFrame or only a timeout?

I guess that code should be moved over to componentDidLoad instead since it requires the DOM to be ready.

componentWillLoad lifecycle event of the root component fires up before any of the child components are rendered.

On Mon., Sep. 2, 2019, 6:25 a.m. dennissch, notifications@github.com wrote:

I am not able to swipe the super-tabs-container, also I am not able to change content when I click on the super-tab-button in super-tabs-toolbar

@ihadeed https://github.com/ihadeed @utbhavesh https://github.com/utbhavesh After some trying, I was able to narrow down the issue. It seems that SuperTabs are loaded before the document. With the SetTimeout workaround swiping works again.

/node_modules/@ionic-super-tabs/core/dist/esm/super-tab_3.entry.js

... sync componentWillLoad() {
setTimeout(async () => { // XXX

    if (this.config) {
        await this.setConfig(this.config);
    }
    this.debug('componentWillLoad fired');
    // index children
    this.indexChildren();
    // set the selected tab so the toolbar & container are aligned and in sync
    this.selectTab(this.activeTabIndex);
    // setup event listeners so we can synchronize child components
    // 1. listen to selectedTabIndex changes emitted by the container.
    this.el.addEventListener('selectedTabIndexChange', this.onContainerSelectedTabChange.bind(this));
    // 2. listen to activeTabIndex changes emitted by the container
    this.el.addEventListener('activeTabIndexChange', this.onContainerActiveTabChange.bind(this));
    // 3. listen to tab button clicks emitted by the toolbar
    this.el.addEventListener('buttonClick', this.onToolbarButtonClick.bind(this));

}, 1000);
} ...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zyra/ionic-super-tabs/issues/366?email_source=notifications&email_token=ADJHY5E7OK2TXOA5Z53D6Z3QHTSYDA5CNFSM4G3QV4Q2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5VNJFA#issuecomment-527094932, or mute the thread https://github.com/notifications/unsubscribe-auth/ADJHY5AFEIMVDBJXLGMILE3QHTSYDANCNFSM4G3QV4QQ .

kunalkakkad commented 4 years ago

Hello, Can anyone guide me on how to place super tabs in the bottom of the screen? As it is not accepting any properties like "tabsPlacement=bottom". I am checking it on Ionic v4.

Thanks.

aditbharadwaj commented 4 years ago

Hello, Can anyone guide me on how to place super tabs in the bottom of the screen? As it is not accepting any properties like "tabsPlacement=bottom". I am checking it on Ionic v4.

Thanks.

just add

slot="bottom"

<super-tabs-toolbar slot="bottom" > it works for me , it should for u as well

kunalkakkad commented 4 years ago

Hello, Can anyone guide me on how to place super tabs in the bottom of the screen? As it is not accepting any properties like "tabsPlacement=bottom". I am checking it on Ionic v4. Thanks.

just add

slot="bottom"

<super-tabs-toolbar slot="bottom" > it works for me , it should for u as well

Thanks man. It worked.

aditbharadwaj commented 4 years ago

glad I can help.

Thanks

Regards,

Adit Bharadwaj

On Sat, Oct 19, 2019, 2:57 PM Kunal Kakkad notifications@github.com wrote:

Hello, Can anyone guide me on how to place super tabs in the bottom of the screen? As it is not accepting any properties like "tabsPlacement=bottom". I am checking it on Ionic v4. Thanks.

just add

slot="bottom"
it works for me , it should for u as well Thanks man. It worked. — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or unsubscribe .

danielehrhardt commented 4 years ago

Are there any sample Styles for the current Super Tabs.

Ah i had to import the forRoot Module

SuperTabsModule.forRoot()
--> in the app.module.ts

JuniorFlorentino commented 4 years ago

good afternoon, how to call to pages like son of a super tab, I did not want it to be on the same screen, another difficulty I am trying is to enable scrolling in super tab content, when there is too much content

zyra / ionic-super-tabs

ionic4 compatibility #366

Upgrade steps

Vanilla

Angular