Ionic Swipeable Tabs are now here!


#123

@ihadeed first of all, thanks for this great plugin!

Is there also a possibility to add a “spaceBetween” the pages like in the ion-slides?
-> https://ionicframework.com/docs/api/components/slides/Slides/ -> “Input Properties” -> “spaceBetween”

Thanks so far,
Unkn0wn0x


#124

I got an error .So far what i have done is
npm install ionic2-super-tabs --save

import { SuperTabsModule } from 'ionic2-super-tabs';



imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    SuperTabsModule

  ],

My Tabs.html file

<super-tabs>
    <super-tab [tabRoot]="tab1Root" title="First page"></super-tab>
    <super-tab [tabRoot]="tab1Root" title="Second page"></super-tab>
    <super-tab [tabRoot]="tab1Root" title="Third page"></super-tab>
</super-tabs>

**_

ERROR IS
compiler.js:466 Uncaught Error: Template parse errors:
Can’t bind to ‘tabRoot’ since it isn’t a known property of ‘super-tab’.

  1. If ‘super-tab’ is an Angular component and it has ‘tabRoot’ input, then verify that it is part of this module.
  2. If ‘super-tab’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
    <super-tab [ERROR ->][tabRoot]=“tab1Root” title=“First page”>
    <super-tab [tabRoot]=“tab1Root” title=“Secon”): ng:///AppModule/TabsPage.html@1:15
    ’super-tab’ is not a known element:
  4. If ‘super-tab’ is an Angular component, then verify that it is part of this module.
  5. If ‘super-tab’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
    [ERROR ->]<super-tab [tabRoot]=“tab1Root” title=“First page”>
    <super-tab [tabRoot]=“tab1Root” t"): ng:///AppModule/TabsPage.html@1:4

_**


#125

Hi,
I just start new project and install swipable tabs. But tabs are without any CSS style and also can’t be changed by swiping.

Should I place CSS manually to the project?

Thanks


#126

I think there is a bug in the newest version. See this issue on github. Try reverting to 4.1.4.
npm install ionic2-super-tabs@4.1.4


#127

use: [root] instead of [tabRoot]


#128

Thanks, It worked :+1::+1:


#129

Hi. I facing some problem when i try to use this plugin in my project. I’m using ionic v 3.9.2

the tabs doesnt display as it should. it show something similar to this.
https://uploads.disquscdn.com/images/e589358f321ce83cfcfe86b1395faa1d58b1e68c92dffa3f5516bd7aea1409b6.png

i’m following steps by steps from documentation.


#130

UPDATE: All of sudden the code working but tab at top of title and swipe did not working


#131

Hello, @ihadeed

I follow your code for swipeable tabs

but when i go to page i got error like
Cannot find module "…/ionic2-super-tabs/src"
and page shows white screen

please help me


#134

Hey Hi… First of all thank you so much for this solution on swipeable tabs…!!! very useful…

I need some suggestions on the following:
I am stuck in a situation where the Home page tab has segments in it. Now when the user swipes left it should switch the segments and once the end of segment is reached then the next swipe should switch the tabs. Please let me know if this is achievable with your above solution. Badly in need of a solution for this requesting you to please help me…

Thanks in advance :slight_smile:2018_01_29_16_58_33_Ionic_App


#135

Hey guys

I got locked out of my account that I used for this post.

Came here to say, if you’re having trouble with this module, please go to the Github repository. Check existing issues, read any notes in the readme file, and then post a new issue if you still can’t find what you’re looking for.

I will not be monitoring any issues and/or provide any kind of support here. Github issues are more organized, and they make it easier to track issues & respond to them.

Thanks for understanding!


#136

Hi, I have raised this requirement as an issue in your git hub repo (https://github.com/zyra/ionic2-super-tabs/issues/257) Requesting you to please address the same.

Thanks


#137

Screenshot_2018-02-26_12-04-11

I’m using Linux mint. Is this not support in linux?? Any solution plz…


#138

Hi All, I implemented the swipeable tabs but I need to show the tabs below the ion-header of individual tabs also I have to hide tabs on the sub pages. Any help for me on this?


#139

hi, can you send me your code please??


#140

You must use

SuperTabsModule.forRoot()


#141

how to hide tabs in the inner pages? tabsHideOnSubPages:true is not working. Could any one please help?


#142

Hi all,
I have just installed this tabs to my older project (after updating to new Ionic). I placed the tabs to the root page. But if I come to this page firstly, I do not see the tabs toolbar - it has html attribute hidden. If I go to the detail from tab and then go back, the tab toolbar is shown - it has not attribute hidden.

Why this is happening? I have the code exactly by documentation…

thanks


#143

hi, i am using super tab working good.


#144

Hi

just curious. I tried to implement supertabs in Stackblitz (minimal coding), but can’t get it to work.

So I just added the module to app.module.ts, added the tabs reference in tabs.html and amended tabs.ts.

And of course, the NPM package added

Still no joy…

Anyone care to assist?

Tom