Ionic 4 Sliding segments

sliding-segments.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged()" [(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-button value="2">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true">
    <ion-slide>
      First
    </ion-slide>
    <ion-slide>
      second
    </ion-slide>
    <ion-slide>
      third
    </ion-slide>
  </ion-slides>

</ion-content>

sliding-segments.page.scss

ion-slide {
  height: calc(100vh - 140px);
}

sliding-segments.page.ts

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.page.html',
  styleUrls: ['./demo.page.scss'],
})
export class DemoPage implements OnInit {

  @ViewChild('slides', { static: true }) slider: IonSlides;

  segment = 0;

  constructor(
  ) { }

  ngOnInit() {
  }

  async segmentChanged() {
    await this.slider.slideTo(this.segment);
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }


}

welcome ;)

Thanks for this. This should be added to Ionic documentation

nice work! how does it work the other way around? When you slide, how can you change it to the ion segment button too?

It works both ways, the segment has [(ngModel)]="segment".

I have a question when using sliding segments for displaying card lists from looping. So the result is displayed in the grid view instead of list. Here I provide the screenshot. https://i.ibb.co/wzr04HF/ss.png.

This is my view codes :

  <ion-slides #slides (ionSlideDidChange)="slideChanged()">
    <ion-slide>
      <ion-card style="position: absolute;" *ngFor="let it of items; let i = index;" #item (click)="startMorph(i,it)">
        <fiv-ripple>
          <img #image [src]="it.url" alt="">
          <ion-card-header #label>
            <ion-card-subtitle>
              <ion-badge [color]="it.badge" style="font-size: 12px">{{it.subtitle}}</ion-badge>
            </ion-card-subtitle>
            <ion-card-title class="card-title">{{it.title}}</ion-card-title><br>
            <div #desc style="font-size: 10px">{{currentDate}}</div>
          </ion-card-header>
        </fiv-ripple>
      </ion-card>
    </ion-slide>
    <ion-slide>
      second
    </ion-slide>
  </ion-slides>

If someone else has experienced this issue, please help me. Thank you.

It could simply be the fiv-ripple breaking the cards. I don't think the card would an issue.

how to adjust ion-slide content to full height?

Just set the height of the slide to 100vh minus your header + segment offset.

Hi, Can you plz explain me in detail how to set the height i m new to css because i m not to see the data and in the second slide it is taking the same height and page is scrolling vertically. please help .

And in the second slide i need to put the ion-text area in footer and it should be fixed but now it is not.
.

Hi. Thanks for the work.
Is there a way to implement in Ionic react?

the idea of combine segment with slides is awesome. thank you, bro!

You are the man! LOL
I really appreciate it!
Thanks for the excelent work.
The ionic documentation is really poor in the section about segments and thanks to you i finally could use this feature.

On Ionic 5.4.16 if we leave and return to the page the segment seem not to work anymore.

Thanks Lucas for the warning. I haven't updated recently but I will as soon I get the opportunity.

Yep that's a pity for it's a fine implementation, nicely done.

On Ionic 5.4.16 if we leave and return to the page the segment seem not to work anymore.

Can confirm this. Happening in my projects as well.
Ionic CLI : 6.3.0 (/Users/______/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.900.6
@angular-devkit/schematics : 9.0.6
@angular/cli : 9.0.6
@ionic/angular-toolkit : 2.2.0

How do I make the ion-segment selected tab in the middle and the rest of tabs to either side of it when scrolling the content with overflow tab menu items? like a ViewPager in Android.

Below is the implementation of item i want to center.

I want to center the top ion-segment scroll while scrolling through ion-slide.

How do I make the ion-segment selected tab in the middle and the rest of tabs to either side of it when scrolling the content with overflow tab menu items? like a ViewPager in Android.
I want to center the top ion-segment scroll while scrolling through ion-slide.

In this case, you probably shouldn't use segments but slides

Not working for me.. getactivatedindex is not returning anything ?/ can anyone help ?

but when I manually refresh my page it start working !! I have used same code

On Ionic 5.4.16 if we leave and return to the page the segment seem not to work anymore.

Yes I confirm in current version its is not working.

Superb, it worked perfectly for my environment

Ionic CLI                     : 6.8.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework               : @ionic/angular 5.1.0

I'm attempting to scroll through. Once the gesture is complete, it takes me to the next segment

I have more than 8 slides and ion-segment-button... slides working fine.. but when i scroll ion-slide, ion-segment-button not scrolling with ion-slide. how can i scroll active segment-button with the ion-slide?

Thank you very much!
Tested and working on Ionic 5 :)

great bro

when i select any segment by default ion slide wont change it always shows the first page