Ionic 2 Scrollable Tabs

Ionic 2 Scrollable Tabs

Directive to make Ion-tabs scrollable.

Free!

(2)
sino thomas

sino thomas

Member since 2015

Details

Version:
1.0
Size:
0mb
Ionic:
2.x beta
Platforms:
iOS, Android, Windows Phone
Released:
7 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
Ionic 2 Plugin to achieve a scrollable tab. Written completely in Typescript and as a reusable Angular 2 Directive.

Directive to make Ion-tabs scrollable.

Implementation

  1. Copy & paste Scrollable-Tabs component to components folder.
  2. Import it in app.module.ts.
  3. Place #ionTabs [scrollable-tabs]="ionTabs" in ion-tabs within html.

Updates

  1. updated Ionic lib to 2.0.0
  2. updated scrollable-tabs directive for Ionic 2.0
  3. bugfix: [show] property of ion-tab
  4. new implementation using local variable
  5. new feature opts for options

Hey there! You'll need to log in before you can leave a comment here.

Sekar SN

Sekar SN   ·   7 years ago

Wow!!! Good work @sinothomas

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sekar SN

Sekar SN   ·   7 years ago

@sinothomas Is there way to hide scrollbars?

sino thomas

sino thomas   ·   7 years ago

In my testing : Scrollbars will only show when running on a browser not visible on devices. Please let me know if show on any device I have updated this plugin so test with new update.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Thomas Pham

Thomas Pham   ·   7 years ago

Hi Sino, Can you give me an example for scrollable tabs (includes html, css,...) , please? I am a newbie Thomas

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Thomas Pham

Thomas Pham   ·   7 years ago

In home screen of my app, I want to integrate 2 tabs with Scrollable Tabs, is it possible?

sino thomas

sino thomas   ·   7 years ago

Yes, 2 Ion-tabs but with different placement. Otherwise it will overlap.

Thomas Pham

Thomas Pham   ·   7 years ago

I viewed your example <ion-tab [root]="HomeRoot" (ionSelect)="selectTab(1)" tabIcon="home" tabTitle="Home"></ion-tab> .... But it will replace my tab root. How can I do?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

roshan dhabekar

roshan dhabekar   ·   7 years ago

Can you please share , your plugin integration steps with youtube..! @sinothomas thanks for your great job..!

roshan dhabekar

roshan dhabekar   ·   7 years ago

thanks man working fine , it was issue with ionic 2 project structure , instead of component consider it as provider.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Eddy Ng

Eddy Ng   ·   7 years ago

I tried the [scrollable-tabs] directive and it worked (it showed the scroll). However, it broke the [show] functionality of the ion-tab. If I removed the [scrollable-tabs], the ionic-tab's [show] attribute worked. Do you know how to fix this?

gopinath

gopinath   ·   7 years ago

where we should add this peace of code [scrollable-tabs]="selectedTabIndex" in html (i mean in which tag we have to add)

sino thomas

sino thomas   ·   7 years ago

Add [scrollable-tabs]="selectedTabIndex" in <ion-tabs>

sino thomas

sino thomas   ·   7 years ago

as <ion-tabs [scrollable-tabs]="selectedTabIndex" .......

Eddy Ng

Eddy Ng   ·   7 years ago

Sino, I saw that you updated the component 12 days ago. Did it include the fix for the broken [show] functionality of the ion-tab that I mentioned? If not, do you have any plan to fix it?

sino thomas

sino thomas   ·   7 years ago

Eddy, I have fix broken [show] functionality of the ion-tab.

Eddy Ng

Eddy Ng   ·   7 years ago

Thank you very much. I'll give it a try later.

Eddy Ng

Eddy Ng   ·   7 years ago

I tried the new component and it didn't work. 1. First of all, the downloaded file didn't have any extension. I assumed it's a zip file because the older download was a .zip file. So, I renamed it to a zip file. But I could not open the zip file in Windows Explorer. I had to use 7-zip to open the zip file. 2. I copied the scrollable-tabs.ts and import it into the declarations section of my app.module.ts. I didn't add it to the entryComponents section because when I did, it gave me an error that scrollable tabs is not a component. 3. The transpiler generated a warning about unused import: OnChanges, SimpleChange. So, I removed them (but not removing them also gave me the same problem as described in the next point). 4. Added the directive to one of my tabs like below: <ion-tabs #ionTabs [scrollable-tabs]="ionTabs"> <ion-tab tabIcon="information-circle" tabTitle="Properties" [root]="tabDocumentInfo" [rootParams]="parentNav"></ion-tab> <ion-tab tabIcon="chatboxes" tabTitle="History & Comments" [root]="tabDocumentHistory" [rootParams]="parentNav"></ion-tab> </ion-tabs> When do "ionic serve" and open my tabbed page, the following error was generated: "TypeError: Cannot read property 'clientWidth' of undefined at ScrollableTabs.scrollToselectedTab (http://localhost:8100/build/main.js:106629:48) at ScrollableTabs.ngAfterViewInit (http://localhost:8100/build/main.js:106575:14) at CompiledTemplate.proxyViewClass.View_DocumentDetail0.detectChangesInternal (/AppModule/DocumentDetail/component.ngfactory.js:104:73) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:103101:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:103194:44) at CompiledTemplate.proxyViewClass.View_DocumentDetail_Host0.detectChangesInternal (/AppModule/DocumentDetail/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:103101:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:103194:44) at ViewRef_.detectChanges (http://localhost:8100/build/main.js:55572:20) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:30595:40)" Can you please help what I did wrong?

sino thomas

sino thomas   ·   7 years ago

get the files from GitHub. not able to load correctly to market.ionic.i

Eddy Ng

Eddy Ng   ·   7 years ago

The code in GitHub is the exact same one that I got yesterday from the ionic market. It's just I had to go through all the hassle of adding .zip extension and opening it with 7-zip. Otherwise, it's the exact same code and as I mentioned above, it generated the error when I tried using it in the ion-tabs in my project. Can you please look at it?

sino thomas

sino thomas   ·   7 years ago

I found the bug and fixed it. bug: "undefined" selectedTab when <ion-tabs selectedIndex="" > not set. fix: By default first tab is selected when selectedIndex property not set on <ion-tabs>.

Eddy Ng

Eddy Ng   ·   7 years ago

Thanks for the quick response and bug fix. I just tested it and it now works. Excellent work.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

gopinath

gopinath   ·   7 years ago

Please make a video so that we all can understand how to make one. thank you very much.

sino thomas

sino thomas   ·   7 years ago

check out the blog post http://sinothomas.com/blog/index.php/2017/02/17/implementing-ionic-2-scrollable-tabs-directive/

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Javier Castañeda

Javier Castañeda   ·   7 years ago

Hi Sino, I'm trying to implement the scrollable tabs but it's still not very clear to me what are the steps to install it on an existing project as a plugin. Would it be possible for you to post a more detailed step-by-step guide? Thanks!

Javier Castañeda

Javier Castañeda   ·   7 years ago

I was able to implement it. But now when I go back from the tabbed page to my Home screen the tabs don't disappear. Have you ever had that error before?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Javier

Javier   ·   7 years ago

Hi Sino, I'm trying to use the directive #ionTabs [scrollable-tabs] = "ionTabs" an it's fine work when the child tab is static but try to use * ngFor to put a dynamic error on this line let selectedTab_LeftOffset = Document.getElementById (selectedTab.id) .offsetLeft; Because the element has not yet come, have you any suggestion. thank for your help

Pham Van Binh

Pham Van Binh   ·   7 years ago

you can call refreshScrollbarTabs() function after subcribe element. See refreshScrollbarTabs() in example

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gux Ch

Gux Ch   ·   7 years ago

Hi @sinothomas, it worked really good :) , but I wonder if it would be possible to make it work using segment buttons instead of tabs, since I already have bottom tabs as main navigation and I think multiple/nested tabs are not supported by Ionic 2. Any help would be great, Thanks!

Christian Neil Anthony Wico

Christian Neil Anthony Wico   ·   7 years ago

NVM. I found the problem. Apparently, This 'scrollable-tabs' component doesn't like Ionic 3's Lazy Loading. I reverted to the traditional style of page declaration in only my 'TabsPage' and it worked.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Christian Neil Anthony Wico

Christian Neil Anthony Wico   ·   7 years ago

Can't bind to 'scrollable-tabs' since it isn't a known property of 'ion-tabs'. I made sure that it was declared in app.module and added to the <ion-tabs> tag. That's what I get.

riyaz

riyaz   ·   7 years ago

I have used ionic 3 lazy loading method for both TabsPage and for multiple-tabs. For that I've imported ScrollableTabs in TabsPageModule.js instead of appModule.js

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hassan Aghdam

Hassan Aghdam   ·   7 years ago

Hi Sino, it works good in ltr direction. But not in rtl. when I change app direction in index.html the 'newScrollLeft' takes wrong value. Please fix it for rtl direction too.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hassan Aghdam

Hassan Aghdam   ·   7 years ago

Hi Sino, it works good in ltr direction. But not in rtl. when I change app direction in index.html the 'newScrollLeft' takes wrong value. Please fix it for rtl direction too.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Christian Neil Anthony Wico

Christian Neil Anthony Wico   ·   7 years ago

Can't bind to 'scrollable-tabs' since it isn't a known property of 'ion-tabs'. I made sure that it was declared in app.module and added to the <ion-tabs> tag. That's what I get.

riyaz

riyaz   ·   7 years ago

I have used ionic 3 lazy loading method for both TabsPage and for multiple-tabs. For that I've imported ScrollableTabs in TabsPageModule.js instead of appModule.js

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gux Ch

Gux Ch   ·   7 years ago

Hi @sinothomas, it worked really good :) , but I wonder if it would be possible to make it work using segment buttons instead of tabs, since I already have bottom tabs as main navigation and I think multiple/nested tabs are not supported by Ionic 2. Any help would be great, Thanks!

Christian Neil Anthony Wico

Christian Neil Anthony Wico   ·   7 years ago

NVM. I found the problem. Apparently, This 'scrollable-tabs' component doesn't like Ionic 3's Lazy Loading. I reverted to the traditional style of page declaration in only my 'TabsPage' and it worked.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Javier

Javier   ·   7 years ago

Hi Sino, I'm trying to use the directive #ionTabs [scrollable-tabs] = "ionTabs" an it's fine work when the child tab is static but try to use * ngFor to put a dynamic error on this line let selectedTab_LeftOffset = Document.getElementById (selectedTab.id) .offsetLeft; Because the element has not yet come, have you any suggestion. thank for your help

Pham Van Binh

Pham Van Binh   ·   7 years ago

you can call refreshScrollbarTabs() function after subcribe element. See refreshScrollbarTabs() in example

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Javier Castañeda

Javier Castañeda   ·   7 years ago

Hi Sino, I'm trying to implement the scrollable tabs but it's still not very clear to me what are the steps to install it on an existing project as a plugin. Would it be possible for you to post a more detailed step-by-step guide? Thanks!

Javier Castañeda

Javier Castañeda   ·   7 years ago

I was able to implement it. But now when I go back from the tabbed page to my Home screen the tabs don't disappear. Have you ever had that error before?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sekar SN

Sekar SN   ·   7 years ago

@sinothomas Is there way to hide scrollbars?

sino thomas

sino thomas   ·   7 years ago

In my testing : Scrollbars will only show when running on a browser not visible on devices. Please let me know if show on any device I have updated this plugin so test with new update.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Eddy Ng

Eddy Ng   ·   7 years ago

I tried the [scrollable-tabs] directive and it worked (it showed the scroll). However, it broke the [show] functionality of the ion-tab. If I removed the [scrollable-tabs], the ionic-tab's [show] attribute worked. Do you know how to fix this?

gopinath

gopinath   ·   7 years ago

where we should add this peace of code [scrollable-tabs]="selectedTabIndex" in html (i mean in which tag we have to add)

sino thomas

sino thomas   ·   7 years ago

Add [scrollable-tabs]="selectedTabIndex" in <ion-tabs>

sino thomas

sino thomas   ·   7 years ago

as <ion-tabs [scrollable-tabs]="selectedTabIndex" .......

Eddy Ng

Eddy Ng   ·   7 years ago

Sino, I saw that you updated the component 12 days ago. Did it include the fix for the broken [show] functionality of the ion-tab that I mentioned? If not, do you have any plan to fix it?

sino thomas

sino thomas   ·   7 years ago

Eddy, I have fix broken [show] functionality of the ion-tab.

Eddy Ng

Eddy Ng   ·   7 years ago

Thank you very much. I'll give it a try later.

Eddy Ng

Eddy Ng   ·   7 years ago

I tried the new component and it didn't work. 1. First of all, the downloaded file didn't have any extension. I assumed it's a zip file because the older download was a .zip file. So, I renamed it to a zip file. But I could not open the zip file in Windows Explorer. I had to use 7-zip to open the zip file. 2. I copied the scrollable-tabs.ts and import it into the declarations section of my app.module.ts. I didn't add it to the entryComponents section because when I did, it gave me an error that scrollable tabs is not a component. 3. The transpiler generated a warning about unused import: OnChanges, SimpleChange. So, I removed them (but not removing them also gave me the same problem as described in the next point). 4. Added the directive to one of my tabs like below: <ion-tabs #ionTabs [scrollable-tabs]="ionTabs"> <ion-tab tabIcon="information-circle" tabTitle="Properties" [root]="tabDocumentInfo" [rootParams]="parentNav"></ion-tab> <ion-tab tabIcon="chatboxes" tabTitle="History & Comments" [root]="tabDocumentHistory" [rootParams]="parentNav"></ion-tab> </ion-tabs> When do "ionic serve" and open my tabbed page, the following error was generated: "TypeError: Cannot read property 'clientWidth' of undefined at ScrollableTabs.scrollToselectedTab (http://localhost:8100/build/main.js:106629:48) at ScrollableTabs.ngAfterViewInit (http://localhost:8100/build/main.js:106575:14) at CompiledTemplate.proxyViewClass.View_DocumentDetail0.detectChangesInternal (/AppModule/DocumentDetail/component.ngfactory.js:104:73) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:103101:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:103194:44) at CompiledTemplate.proxyViewClass.View_DocumentDetail_Host0.detectChangesInternal (/AppModule/DocumentDetail/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:103101:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:103194:44) at ViewRef_.detectChanges (http://localhost:8100/build/main.js:55572:20) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:30595:40)" Can you please help what I did wrong?

sino thomas

sino thomas   ·   7 years ago

get the files from GitHub. not able to load correctly to market.ionic.i

Eddy Ng

Eddy Ng   ·   7 years ago

The code in GitHub is the exact same one that I got yesterday from the ionic market. It's just I had to go through all the hassle of adding .zip extension and opening it with 7-zip. Otherwise, it's the exact same code and as I mentioned above, it generated the error when I tried using it in the ion-tabs in my project. Can you please look at it?

sino thomas

sino thomas   ·   7 years ago

I found the bug and fixed it. bug: "undefined" selectedTab when <ion-tabs selectedIndex="" > not set. fix: By default first tab is selected when selectedIndex property not set on <ion-tabs>.

Eddy Ng

Eddy Ng   ·   7 years ago

Thanks for the quick response and bug fix. I just tested it and it now works. Excellent work.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

roshan dhabekar

roshan dhabekar   ·   7 years ago

Can you please share , your plugin integration steps with youtube..! @sinothomas thanks for your great job..!

roshan dhabekar

roshan dhabekar   ·   7 years ago

thanks man working fine , it was issue with ionic 2 project structure , instead of component consider it as provider.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Thomas Pham

Thomas Pham   ·   7 years ago

In home screen of my app, I want to integrate 2 tabs with Scrollable Tabs, is it possible?

sino thomas

sino thomas   ·   7 years ago

Yes, 2 Ion-tabs but with different placement. Otherwise it will overlap.

Thomas Pham

Thomas Pham   ·   7 years ago

I viewed your example <ion-tab [root]="HomeRoot" (ionSelect)="selectTab(1)" tabIcon="home" tabTitle="Home"></ion-tab> .... But it will replace my tab root. How can I do?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Thomas Pham

Thomas Pham   ·   7 years ago

Hi Sino, Can you give me an example for scrollable tabs (includes html, css,...) , please? I am a newbie Thomas

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sekar SN

Sekar SN   ·   7 years ago

Wow!!! Good work @sinothomas

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

gopinath

gopinath   ·   7 years ago

Please make a video so that we all can understand how to make one. thank you very much.

sino thomas

sino thomas   ·   7 years ago

check out the blog post http://sinothomas.com/blog/index.php/2017/02/17/implementing-ionic-2-scrollable-tabs-directive/

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

Soufien Karray   ·     ·   7 years ago

nice job sino :)

Javier   ·     ·   7 years ago

5

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Javier    ·     ·   7 years ago

5

Soufien Karray    ·     ·   7 years ago

nice job sino :)