Ionic2 Scrollable Tabs

Ionic2 Scrollable Tabs

ionic2 scrollable tabs is an automatic tab scroll when select with smooth user experience. You can use it separately or embedded with original Ionic2 Tabs without any problems. Easy to integrate with ngFor to use with different data in tabs. Try it for free to help you save time in development.

About me

My name is Quang Anh. I'm a full stack developer (NodeJS + frontend).
View my apps at: https://market.ionic.io/user/74043
Support me with my product: https://sellfy.com/p/THrc/

Setup and Running

  1. npm install -g ionic

  2. git clone https://github.com/quanganh206/ionic2-scrolltabs

  3. npm install

  4. npm build


Using


  • Copy scrolltabs folder to components folder

  • in app.module.ts



import { Ionic2Calendar } from 'ionic2-calendar2';
  @NgModule({ 
  declarations: [
  ...
  ScrollTabsComponent,
  ...
  ],
})



  • in [page].module.ts (lazy-loading)



import { NgModule } from '@angular/core';
import { HelloIonicPage } from './hello-ionic';
import { IonicPageModule } from 'ionic-angular';
import { ScrollTabsComponentModule } from '../../components/scrolltabs';

@NgModule({
declarations: [
HelloIonicPage
],
imports: [
ScrollTabsComponentModule,
IonicPageModule.forChild(HelloIonicPage)
],
entryComponents: [
HelloIonicPage
]
})
export class HelloIonicPageModule {}



  • Use in page: 



<div [ngSwitch]="selectedTab"
  <div *ngFor="let tab of tabs; let i = index"
    <div class="content-wrapper" *ngSwitchCase="tabs[i]"
      <h3Welcome to Ionic2 ScrollTab !</h3
      <p
       This is TAB {{i}}.
      </p
      <p
        Support me with my products: https://market.ionic.io/themes/ionfull-      ecommerce-app-9ecom
      </p
      <p
        <button ion-button color="primary" menuToggleToggle Menu</button
      </p
     </div
   </div
</div



  • Push component to anywhere you want to display it



<scroll-tabs #scrollTab [tabs]="tabs" (onSelectedTab)="tabChange($event)"</scroll-tabs

Environment


  • Cordova CLI: 6.5.0 

  • Ionic Framework Version: 2.3.0

  • Ionic CLI Version: 2.2.1

  • Ionic App Lib Version: 2.2.0

  • Ionic App Scripts Version: 1.1.4

  • ios-deploy version: 1.9.0 

  • ios-sim version: 5.0.8 

  • OS: macOS Sierra

  • Node Version: v7.6.0

  • Xcode version: Xcode 8.2.1 Build version 8C1002


Update


  • 15th May 2017: Update libs & new Ion-Scroll

  • 18th Apr 2017: Update lazy loading

  • 05th Apr 2017: fix Scroll element issue (thanks @Abhith for your contribution)

  • 24th Mar 2017: publish

Powered by