Sekar SN
Wow!!! Good work @sinothomas
Ionic 2 Scrollable Tabs
Directive to make Ion-tabs scrollable.
Free!
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
- Copy & paste Scrollable-Tabs component to components folder.
- Import it in app.module.ts.
- Place #ionTabs [scrollable-tabs]="ionTabs" in ion-tabs within html.
Updates
- updated Ionic lib to 2.0.0
- updated scrollable-tabs directive for Ionic 2.0
- bugfix: [show] property of ion-tab
- new implementation using local variable
- new feature opts for options
Hey there! You'll need to log in before you can leave a comment here.
Sekar SN
@sinothomas Is there way to hide scrollbars?
sino thomas
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.
Thomas Pham
Hi Sino, Can you give me an example for scrollable tabs (includes html, css,...) , please? I am a newbie Thomas
Thomas Pham
In home screen of my app, I want to integrate 2 tabs with Scrollable Tabs, is it possible?
Thomas Pham
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?
roshan dhabekar
Can you please share , your plugin integration steps with youtube..! @sinothomas thanks for your great job..!
roshan dhabekar
thanks man working fine , it was issue with ionic 2 project structure , instead of component consider it as provider.
Eddy Ng
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
where we should add this peace of code [scrollable-tabs]="selectedTabIndex" in html (i mean in which tag we have to add)
Eddy Ng
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?
Eddy Ng
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?
Eddy Ng
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
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
Thanks for the quick response and bug fix. I just tested it and it now works. Excellent work.
gopinath
Please make a video so that we all can understand how to make one. thank you very much.
sino thomas
check out the blog post http://sinothomas.com/blog/index.php/2017/02/17/implementing-ionic-2-scrollable-tabs-directive/
Javier Castañeda
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
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?
Javier
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
you can call refreshScrollbarTabs() function after subcribe element. See refreshScrollbarTabs() in example
Gux Ch
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
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.
Christian Neil Anthony Wico
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
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
Hassan Aghdam
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.
Hassan Aghdam
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.
Christian Neil Anthony Wico
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
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
Gux Ch
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
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.
Javier
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
you can call refreshScrollbarTabs() function after subcribe element. See refreshScrollbarTabs() in example
Javier Castañeda
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
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?
Sekar SN
@sinothomas Is there way to hide scrollbars?
sino thomas
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.
Eddy Ng
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
where we should add this peace of code [scrollable-tabs]="selectedTabIndex" in html (i mean in which tag we have to add)
Eddy Ng
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?
Eddy Ng
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?
Eddy Ng
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
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
Thanks for the quick response and bug fix. I just tested it and it now works. Excellent work.
roshan dhabekar
Can you please share , your plugin integration steps with youtube..! @sinothomas thanks for your great job..!
roshan dhabekar
thanks man working fine , it was issue with ionic 2 project structure , instead of component consider it as provider.
Thomas Pham
In home screen of my app, I want to integrate 2 tabs with Scrollable Tabs, is it possible?
Thomas Pham
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?
Thomas Pham
Hi Sino, Can you give me an example for scrollable tabs (includes html, css,...) , please? I am a newbie Thomas
gopinath
Please make a video so that we all can understand how to make one. thank you very much.
sino thomas
check out the blog post http://sinothomas.com/blog/index.php/2017/02/17/implementing-ionic-2-scrollable-tabs-directive/
Hey there! You'll need to log in before you can leave a rating here.
Soufien Karray
nice job sino :)
Javier
5
{{ rating.comment }}
{{ rating.comment }}
Javier
5
Soufien Karray
nice job sino :)