ionic4 compatibility #366

kirillgroshkov · 2019-03-04T11:48:40Z

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 · 2019-03-06T16:30:42Z

Also waiting for ionic4 support.

Pingolus · 2019-03-08T08:54:36Z

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 · 2019-03-09T16:40:32Z

@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 · 2019-03-09T17:06:18Z

@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 · 2019-03-22T12:55:07Z

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

ihadeed · 2019-03-23T02:00:03Z

@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 · 2019-03-24T00:42:40Z

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 · 2019-03-24T06:44:23Z

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 · 2019-03-24T15:26:39Z

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

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 · 2019-03-24T20:16:41Z

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 · 2019-03-25T07:38:21Z

@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 · 2019-04-01T20:56:23Z

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 · 2019-04-02T01:55:57Z

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

@paulovargatt

Events are updated and documented now.
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.
There are no lazy loading capabilities yet. Will definitely explore this feature.

@pipoa

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
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 · 2019-04-03T13:10:56Z

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 · 2019-04-04T19:19:23Z

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 · 2019-04-16T09:01:33Z

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

Pingolus · 2019-04-17T15:39:38Z

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 · 2019-04-18T06:57:47Z

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

maeisdev · 2019-04-19T15:24:34Z

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 · 2019-05-06T15:29:26Z

Hi,
Any news about ionic 4 compatibility ? Thanks

stinaa · 2019-05-09T11:40:48Z

I submitted a PR with a fix for the blank page issue affecting Safari on all platforms. #379 🤓

Pingolus · 2019-05-27T13:22:15Z

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 · 2019-06-03T19:51:11Z

@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 · 2019-06-14T20:56:13Z

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 · 2019-07-01T14:04:31Z

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

ezrayeoh · 2019-08-15T15:11:10Z

@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 · 2019-08-16T11:49:09Z

@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 · 2019-08-16T16:09:59Z

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

utbhavesh · 2019-08-19T07:14:17Z

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 · 2019-08-19T10:03:29Z

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

dennissch · 2019-09-02T10:25:04Z

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 · 2019-10-10T05:16:41Z

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 · 2019-10-10T10:10:08Z

@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, ***@***.***> 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. ***@***.***/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 <#366?email_source=notifications&email_token=ADJHY5E7OK2TXOA5Z53D6Z3QHTSYDA5CNFSM4G3QV4Q2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5VNJFA#issuecomment-527094932>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADJHY5AFEIMVDBJXLGMILE3QHTSYDANCNFSM4G3QV4QQ> .

kunalkakkad · 2019-10-18T11:55:23Z

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 · 2019-10-18T12:07:56Z

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 · 2019-10-19T09:27:31Z

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 · 2019-10-19T09:48:31Z

glad I can help. Thanks Regards, Adit Bharadwaj

…

On Sat, Oct 19, 2019, 2:57 PM Kunal Kakkad ***@***.***> 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"* <super-tabs-toolbar 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 <#366?email_source=notifications&email_token=ABTQKQST4ROFXS4FO5HVPSLQPLHINA5CNFSM4G3QV4Q2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBXJXHA#issuecomment-544119708>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABTQKQSRIWLOQ6R24QFHFKTQPLHINANCNFSM4G3QV4QQ> .

danielehrhardt · 2019-10-19T18:45:08Z

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 · 2019-11-08T19:00:40Z

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

aditbharadwaj · 2019-11-08T19:06:39Z

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

i can answer one part of that question. u can use modalControllers to call child pages from super tabs they will cover the tabs as well when called and u can style them accordingly. ( if iam guessing ur question right)

JuniorFlorentino · 2019-11-08T19:50:18Z

@aditbharadwaj Is there a possibility to call a super tab like a normal tab?

JuniorFlorentino · 2019-11-08T19:51:26Z

because with a ModalController it will be awkward when dragging the tab it covers, I wanted it to open underneath like a normal tab

aditbharadwaj · 2019-11-08T20:25:28Z

@aditbharadwaj Is there a possibility to call a super tab like a normal tab?

are u referring to this type of example ? on issue #396

ihadeed · 2019-11-08T23:40:51Z

@JuniorFlorentino

how to call to pages like son of a super tab

To call methods on a child page from the root page containing your <super-tabs> element, you can do one of the following:

use a service
use ngrx
inject the root page in the child page

Quick example for the third option:

// in root.page.ts
export class RootPage {

private childPage: ChildPage;

registerChildPage(page: ChildPage) {
  this.childPage = page;
}

onSomethingClick() {
  this.childPage.doSomething();
}

// in child.page.ts
export class ChildPage { 
constructor(parent: RootPage) {
  parent.registerChildPage(this);
}

doSomething() {
  console.log('Root page asked me to do something');
}

The third option will cause a circular dependency. Not sure what side effects that may have but from a quick test it seemed to be fine.

I am trying is to enable scrolling in super tab content, when there is too much content

Are you referring to the toolbar buttons?
Those can be made scroll-able by setting the scrollable property on <super-tabs-toolbar>:

...
<super-tabs-toolbar [scrollable]="true">
...

JuniorFlorentino · 2019-11-11T13:25:15Z

when I have a lot of text I can't scroll down, even using the = [scrollable]="true"

JuniorFlorentino · 2019-11-11T13:26:07Z

my code:

Informationen Bilder Video Botschaft

<super-tabs-container >
  <super-tab>
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
    a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.

    Why do we use it?
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at
    its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
    opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
    packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
    will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by
    accident, sometimes on purpose (injected humour and the like).


    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
    literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
    going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
    Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
    The first line of Lorem Ipsum, "Lorem

    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
    literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
    going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
    Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
    The first line of Lorem Ipsum, "Lorem

    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
    literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
    going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
    Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
    The first line of Lorem Ipsum, "Lorem

    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
    literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
    College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
    going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
    Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
    The first line of Lorem Ipsum, "Lorem
  </super-tab>
  <super-tab>
    
  </super-tab>
  <super-tab>
    
  </super-tab>
</super-tabs-container>

ihadeed · 2019-11-12T01:20:55Z

@JuniorFlorentino

You need to place your content inside of <ion-content></ion-content> if it's not an <ion-nav>

JuniorFlorentino · 2019-11-12T11:41:48Z

@ihadeed Thanks so much, it really worked, thank you so much for your time.

JuniorFlorentino · 2019-11-12T12:00:29Z

@ihadeed Are there any events other than tabChange?

JuniorFlorentino · 2019-11-12T12:16:06Z

because whenever I scroll the page, it happens to run the TabChange event, I would like it to run only when the page actually changes

JuniorFlorentino · 2019-11-12T12:35:03Z

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

ihadeed · 2019-11-12T12:55:53Z

Closing this issue since the Ionic 4 compatibility is now released.

@JuniorFlorentino please open another issue with any issues/questions you have so we're not spamming all the subscribers here. Thanks.

ihadeed pinned this issue Mar 9, 2019

ihadeed self-assigned this Mar 22, 2019

ihadeed added this to the 6.0.0 (Ionic 4 support) milestone Mar 28, 2019

maeisdev mentioned this issue Apr 19, 2019

ionic 4 compile failed #371

Closed

ihadeed closed this as completed Nov 12, 2019

zyra locked as resolved and limited conversation to collaborators Nov 12, 2019

ionic4 compatibility #366

ionic4 compatibility #366

Comments

kirillgroshkov commented Mar 4, 2019 • edited Loading

anuj9196 commented Mar 6, 2019

Pingolus commented Mar 8, 2019 • edited Loading

pipoa commented Mar 9, 2019

anuj9196 commented Mar 9, 2019

Pingolus commented Mar 22, 2019

ihadeed commented Mar 23, 2019

ihadeed commented Mar 24, 2019

ihadeed commented Mar 24, 2019 • edited Loading

dennissch commented Mar 24, 2019

paulovargatt commented Mar 24, 2019 • edited Loading

pipoa commented Mar 25, 2019

pipoa commented Apr 1, 2019

ihadeed commented Apr 2, 2019

dennissch commented Apr 3, 2019

pipoa commented Apr 4, 2019

NgYueHong commented Apr 16, 2019

Pingolus commented Apr 17, 2019

WHeesters commented Apr 18, 2019

maeisdev commented Apr 19, 2019

Pingolus commented May 6, 2019

stinaa commented May 9, 2019

Pingolus commented May 27, 2019

ihadeed commented Jun 3, 2019

Pingolus commented Jun 14, 2019 • edited Loading

pipoa commented Jul 1, 2019 • edited Loading

ezrayeoh commented Aug 15, 2019

dennissch commented Aug 16, 2019

dennissch commented Aug 16, 2019

utbhavesh commented Aug 19, 2019

Angular

aleygues commented Aug 19, 2019

dennissch commented Sep 2, 2019 • edited Loading

aditbharadwaj commented Oct 10, 2019 • edited Loading

ihadeed commented Oct 10, 2019 via email

kunalkakkad commented Oct 18, 2019

aditbharadwaj commented Oct 18, 2019 • edited Loading

kunalkakkad commented Oct 19, 2019

aditbharadwaj commented Oct 19, 2019 via email

danielehrhardt commented Oct 19, 2019 • edited Loading

JuniorFlorentino commented Nov 8, 2019

aditbharadwaj commented Nov 8, 2019

JuniorFlorentino commented Nov 8, 2019

JuniorFlorentino commented Nov 8, 2019

aditbharadwaj commented Nov 8, 2019 • edited Loading

ihadeed commented Nov 8, 2019

JuniorFlorentino commented Nov 11, 2019

JuniorFlorentino commented Nov 11, 2019

ihadeed commented Nov 12, 2019

JuniorFlorentino commented Nov 12, 2019

JuniorFlorentino commented Nov 12, 2019

JuniorFlorentino commented Nov 12, 2019

JuniorFlorentino commented Nov 12, 2019

ihadeed commented Nov 12, 2019

kirillgroshkov commented Mar 4, 2019 •

edited

Loading

Pingolus commented Mar 8, 2019 •

edited

Loading

ihadeed commented Mar 24, 2019 •

edited

Loading

paulovargatt commented Mar 24, 2019 •

edited

Loading

Pingolus commented Jun 14, 2019 •

edited

Loading

pipoa commented Jul 1, 2019 •

edited

Loading

dennissch commented Sep 2, 2019 •

edited

Loading

aditbharadwaj commented Oct 10, 2019 •

edited

Loading

aditbharadwaj commented Oct 18, 2019 •

edited

Loading

danielehrhardt commented Oct 19, 2019 •

edited

Loading

aditbharadwaj commented Nov 8, 2019 •

edited

Loading