Is there any way to add swipeable tab to an existing Ionic blank project.
I tried installing npm i -S @ionic-super-tabs/angular , which doesn’t work in Ionic 4.
Please help
From what I understand it should work with a workaround in Ionic 4. Add this to your tsconfig.app.json -file:
“include”: [
“src”,
“node_modules/@ionic-super-tabs/core/dist/types/components.d.ts”
]
Or if you meant to do a scrollable tab-bar, then just add as many tabs as you want and add this to your css.
ion-tab-button {
min-width: 33.3vw; //Or whatever width you want tab to be - for four visible tabs: min-width: 25vw;
}
ion-tab-bar {
overflow-x: auto;
justify-content: left;
}
This give me the error : error TS18003: No inputs were found in config file ‘tsconfig.json’. Specified ‘include’ paths were ‘[“src”,“node_modules/@ionic-super-tabs/core/dist/types/components.d.ts”]’ and ‘exclude’ paths were ‘["…/out-tsc/app"]’.
What exactly i wanted is this : Ionic Swipeable Tabs are now here! . This now doesn’t work in Ionic 4:slightly_frowning_face:
Why not start from the example project. That works just fine for me.
Download the zip, extract, then ->
- npm install
- npm outdated
- npm update
- npm audit fix
and ionic serve
Works for me. With these (ionic info):
Ionic:
ionic (Ionic CLI) : 4.12.0 (C:\Users\janiy\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.4.1
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available
System:
Android SDK Tools : 26.1.1 (C:\Users\janiy\AppData\Local\Android\Sdk)
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Actually i wanted to add this swipeable tab in my existing project ,which is created by ionic 4 blank template…And want to add this functionality in only one screen
If there is no way to add it in existing project i ll create by this…
@jylikorpi - does this work in a browser? Not working for me, with same config as you.
Hi, I meant the swipe to change tabs wasn’t working, does that work in a browser? (I Didn’t try it on a device)
I made swipable tabs (with gesture) to a blank ionic tabs project. Here are the changes you need to make / add to a blank tabs project:
- start new project with “ionic start swipe-tabs tabs”
- install hammerjs with “npm install hammerjs --save”
- import hammerjs to main.ts -file:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
- create swipe service with “ionic g service services/swipe”
import { Injectable } from '@angular/core';
import { NavController } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class SwipeService {
constructor(private navCtrl: NavController) { }
swipe(e,index: number) {
if (e.angle < -90) {
if (index === 1) {
this.navCtrl.navigateRoot('tabs/tab2');
}
else if (index === 2) {
this.navCtrl.navigateRoot('tabs/tab3');
}
} else if (e.angle < 0) {
if (index === 2) {
this.navCtrl.navigateRoot('tabs/tab1');
}
else if (index === 3) {
this.navCtrl.navigateRoot('tabs/tab2');
}
} else if (e.angle < 90) {
if (index === 2) {
this.navCtrl.navigateRoot('tabs/tab1');
}
else if (index === 3) {
this.navCtrl.navigateRoot('tabs/tab2');
}
} else {
if (index === 1) {
this.navCtrl.navigateRoot('tabs/tab2');
}
else if (index === 2) {
this.navCtrl.navigateRoot('tabs/tab3');
}
}
}
}
- import swipe service to tabs ts-files (tab1.page.ts, tab2.page.ts, tab3.page.ts)
import { SwipeService } from '../services/swipe.service';
constructor(private swipeService: SwipeService) {}
- add swipe service function call (with page index) to tabs pages (tab1.page.html, tab2.page.html, tab3.page.html)
<ion-content (swipe)="swipeService.swipe($event,1)">
! remember to change index number on each page (1, 2, 3)
- export routes from tabs.router.module (just add export in front)
export const routes: Routes = [
Now you should be able to change tabs (tab page) with swiping left or right. I hope I didn’t forget something, but if you try this and it doesn’t work I will try to help you.
Thank u soo much for your great answer.
Could you please help me now…
I tried this as u said but now am getting an error:
Tab1Page.html:8 ERROR TypeError: Cannot read property ‘swipe’ of undefined
at Object.eval [as handleEvent] (Tab1Page.html:8)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
Please help…
Did you forget to import and declare SwipeService in your tab1.page.ts -file?
- import swipe service to tabs ts-files (tab1.page.ts, tab2.page.ts, tab3.page.ts)
import { SwipeService } from '../services/swipe.service';
constructor(private swipeService: SwipeService) {}
I have already done that
Sorry but I don’t know what is wrong in your code. I can’t reproduce that error you have.
Ok… Thank u soo much for your help
Thanks you so much it worked for me, even though i’m getting an error that ‘Identifier ‘swipeService’ refers to a private member of the component’
I tried to fix this issue by using a global variable for the SwipeService and refering to it in the constructor. No error message so far but i’m not sure if that’s good practice^^. Here’S an example for tab1.page.ts:
import { Component } from '@angular/core';
import { SwipeService } from '../services/swipe.service';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
swipeService: SwipeService;
constructor(swipeService: SwipeService) {
this.swipeService = swipeService;
}
}
Thanks for the response. I used public instead of private when I was injecting the the swipe service on the constructor and the error went away…but I’m also not sure if it’s good practice.
I implemented the same thing but i cant shift pages through swipe i am using chrome