CODEWITHSUNDEEP
ionic4
shyni
shyni

Reputation: 90

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 let me know if there any way to do this

Upvotes: 0

Views: 162

Answers (1)

user9088454
user9088454

Reputation: 1122

Yes, there is a way to achieve this.

page.ts

import { Component, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  @ViewChild('slider') slider: IonSlides;
  page = "0";

  selectedTab(index) {
    this.slider.slideTo(index);
  }

  async moveButton() {
    let index = await this.slider.getActiveIndex();
    this.page = index.toString();
    // console.log("0")
  }

  segmentChanged(ev: any) {
    // console.log('Segment changed', ev);
  }
}

page.html

  <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Notifications</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
      <ion-segment-button value="0" (click)="selectedTab(0)">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1" (click)="selectedTab(1)">
        <ion-label>Mentions</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-slides #slider (ionSlideWillChange)="moveButton()">
    <ion-slide>
      <ion-label>All</ion-label>
    </ion-slide>
    <ion-slide>
      <ion-label>Mentions</ion-label>
    </ion-slide>
  </ion-slides>
</ion-content>

Segment work as swipeable tabs, Hope it help you :)

Upvotes: 2

Related Questions