Ionic Swipeable Tabs are now here!

Ionic Swipeable Tabs

Swipeable tabs that can be your main navigation, or just a part of your page.

To see this in action, checkout the example project here.

Installation and Usage

Checkout the installation and usage.

See the full Documentation here for complete usage.

Quick example

<super-tabs>
  <super-tab [root]="page1" title="First page"></super-tab>
  <super-tab [root]="page2" title="Second page"></super-tab>
  <super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>

Suggestions and Issues

Do you have any suggestions? You can mention them here, but it’s better to post them on Github to keep everything in one place.

Are you experiencing issues with the plugin? Please open an issue on Github and I will get you the help you need as soon as I can.




Happy Coding :grin: !

49 Likes

Excellent work :slight_smile: I think a lot of people are going to be happy about this

16 Likes

Great work, this tool could be useful in my projects.

1 Like

This is awesome!

@brandyshea maybe this is worth mentioning over here?

Would be great to know if we should use this for the future or if there are still plans to implement this into the Ionic Framework.

2 Likes

oh ma fuc*ing gawd finally :heart_eyes:

2 Likes

I have problem with implementing this swipable tabs in my ionic 2 application. what i have done so far

app.module.ts:

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

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

tabs.ts:

<super-tabs [selectedIndex]=mySelectedIndex >
  <super-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></super-tab>
  <super-tab [root]="tab2Root" tabTitle="Uneverasalseite" tabIcon="ios-globe"></super-tab>
  <super-tab [root]="tab3Root" tabTitle="News" tabIcon="logo-designernews"></super-tab>
  <super-tab [root]="tab4Root" tabTitle="Charts" tabIcon="ios-stats"></super-tab>
  <super-tab [root]="tab5Root" tabTitle="RPI" tabIcon="ios-pulse"></super-tab>
</super-tabs>

i got error like this and i try to add custom element schema but it shows blank screen.

image

Hey @VENKY_91

You just need to replace selectedIndex with selectedTabIndex.

Wow. Thanks a lot guys.

2 Likes

Wow, good job! Going to give this a try, gif already looks awesome :slight_smile:

4 Likes

still getting same error something went wrong.

tabs.html

    <super-tabs [selectedTabIndex]=mySelectedIndex >
      <super-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></super-tab>
      <super-tab [root]="tab2Root" tabTitle="Uneverasalseite" tabIcon="ios-globe"></super-tab>
      <super-tab [root]="tab3Root" tabTitle="News" tabIcon="logo-designernews"></super-tab>
      <super-tab [root]="tab4Root" tabTitle="Charts" tabIcon="ios-stats"></super-tab>
      <super-tab [root]="tab5Root" tabTitle="RPI" tabIcon="ios-pulse"></super-tab>
    </super-tabs>

tabs.ts

tab1Root: any = HomePage;
  tab2Root: any = UneveraslseitePage;
  tab3Root: any = NewsPage;
  tab4Root: any = ChartsPage;
  tab5Root: any = RpiPage;
  mySelectedIndex: number;
  constructor(navParams: NavParams) {
  this.mySelectedIndex = navParams.data.tabIndex || 0;

That’s a bug :slight_smile: Thanks for pointing it out.

Just fixed it and published ionic2-super-tabs@1.1.1

1 Like

Awesome job! I will give it a try later, This would come in handy!

1 Like

Hi is there any way to delete the indicatior of the tabs?

No, there isn’t a way to do that at the moment. But I can add this feature, I opened a tracking issue for it here: https://github.com/zyramedia/ionic2-super-tabs/issues/1

In the meantime, you can simply just do the following:

<ion-slides>
  <ion-slide *ngFor="let page of pages">
    <ion-nav [root]="page.component" [rootParams]="page.params"></ion-nav>
  </ion-slide>
</ion-slide>

Then just copy the SCSS code for ion-slides here:
https://github.com/zyramedia/ionic2-super-tabs/blob/master/src/components/super-tabs/super-tabs.scss#L26-L33

1 Like

Also since i importet your tabs i get this Runtime Error:
ctor.Parameters.map is not a function.

my app.module.ts:

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

  imports: [
    IonicModule.forRoot(MyApp
    , {
        platforms : {
          android : {
            // These options are available in ionic-angular@2.0.0-beta.2 and up.
            scrollAssist: false,    // Valid options appear to be [true, false]
            autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
          }
        }
      }
    ),
    SuperTabsModule
  ],

Tabs.html:

  <super-tabs color="androidprimary" [selectedTabIndex]="1">
  <super-tab [root]="tab2Root" tabTitle="Categories" tabIcon="categories"></super-tab>
  <super-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></super-tab>
  <super-tab [root]="tab3Root" tabTitle="Hot" tabIcon="hot"></super-tab>
  <!-- <super-tab [root]="tab4Root" tabTitle="Feed" tabIcon="hot"></super-tab> -->
  <!-- <super-tab [root]="tab5Root" tabTitle="Search" tabIcon="hot"></super-tab> -->
</super-tabs>

AFAIK that issue is caused when the Angular version that packages are looking for is inconsistent.

Can you share the dependencies section of your package.json ?

This module was developed and tested with ionic-angular@2.2.0 and @angular/*@2.4.8. Later versions are tested too, the example project uses ionic-angular@3.x (nightly version) and @angular/*@4.0.0-rc.5.

  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/angular": "^1.6.10",
    "@types/cropperjs": "0.0.23",
    "@types/jquery": "^2.0.41",
    "cropperjs": "^1.0.0-beta.2",
    "ionic-angular": "^2.0.0",
    "ionic-native": "2.2.3",
    "ionic2-code-push": "^0.2.0",
    "ionic2-super-tabs": "^1.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },

@lukasrein97 I suggest upgrading your packages to match the latest stable versions mentioned here: https://github.com/driftyco/ionic2-app-base/blob/master/package.json#L12-L35

You can leave the @ionic-native/* packages out and keep using ionic-native to keep this upgrade process simple.

Ok it worked but i get a Whitscreen now:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'root' since it isn't a known property of 'super-tab'.

Anyways how to update it:
first run:
npm install -g npm-check-updates
then
ncu -u
then
npm update
and finally
ncu -a

And you will get this message:
All dependencies match the latest package versions :)

my pakage.json now:

  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/platform-server": "4.0.0",
    "@ionic/storage": "2.0.1",
    "@types/angular": "^1.6.10",
    "@types/cropperjs": "0.0.23",
    "@types/jquery": "^2.0.41",
    "cropperjs": "^1.0.0-beta.2",
    "ionic-angular": "^2.0.0",
    "ionic-native": "2.9.0",
    "ionic2-code-push": "^0.2.0",
    "ionic2-super-tabs": "^1.1.1",
    "ionicons": "3.0.0",
    "rxjs": "5.2.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "typescript": "2.2.2",
    "sw-toolbox": "3.6.0"
  },

Please refer to the documentation here for the correct input names: https://github.com/zyramedia/ionic2-super-tabs#usage