Ionic - how to slide ion-segments?

Question

How can I slide to switch segment like many apps in ionic? I can\'t find any api in ionic official documentation. I can only find this useful thread.

But it does not

Answer 1

simple and easy, no need JS custom code. you can implement ion-slides and ion-segment that listen to 1 variable say segment

Toolbar: bind to segment, and listen ionChange

<ion-toolbar>
    <ion-segment (ionChange)="slides.slideTo(segment)" [(ngModel)]="segment"  color="warning">
      <ion-segment-button value="0">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

ion-slides: capture the slide event, assign segment to current active index

 <ion-slides #slides (ionSlideWillChange)="segment=''+slides.getActiveIndex()">
   <ion-slide>
     profile,
     hello <span *ngIf="this.userProvider.userData">{{this.userProvider.userData.name}}</span>

   </ion-slide>
   <ion-slide>
     second

   </ion-slide>
   <ion-slide>
     third

   </ion-slide>
 </ion-slides>

Answer 2

Sliding segments or tabs have long been expected in ionic but it's finally here. Check this ultimate tutorial on getting it implemented https://www.joshmorony.com/adding-swipeable-tabs-to-an-ionic-application/