Skip to content

Instantly share code, notes, and snippets.

@mdorchain
Last active December 9, 2022 21:34
Show Gist options
  • Save mdorchain/90ee6a0b391b6c51b2e27c2b000f9bdd to your computer and use it in GitHub Desktop.
Save mdorchain/90ee6a0b391b6c51b2e27c2b000f9bdd to your computer and use it in GitHub Desktop.
Ionic 4 Sliding segments
<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>
ion-slide {
height: calc(100vh - 140px);
}
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();
}
}
@leabdalla
Copy link

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

@MarcioCamara
Copy link

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.

@LucasTsolakian
Copy link

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

@mdorchain
Copy link
Author

mdorchain commented Mar 10, 2020

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

@LucasTsolakian
Copy link

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

@NicolaasZA
Copy link

NicolaasZA commented Mar 23, 2020

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

@shashwat-kalpvaig
Copy link

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.

image

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

@mdorchain
Copy link
Author

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

@ikishanoza
Copy link

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

@ikishanoza
Copy link

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

@ikishanoza
Copy link

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.

@syedahaider97
Copy link

syedahaider97 commented May 22, 2020

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

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

@iamrajukh
Copy link

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?

@ErosPingani1
Copy link

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

@harunme3
Copy link

harunme3 commented Mar 7, 2021

great bro

@DragonEmperorOfficial
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment