Skip to content

Instantly share code, notes, and snippets.

@aarjithn
Last active March 14, 2020 11:07
Show Gist options
  • Save aarjithn/d282b019f6046f0de2f0ded623554313 to your computer and use it in GitHub Desktop.
Save aarjithn/d282b019f6046f0de2f0ded623554313 to your computer and use it in GitHub Desktop.
Sliding Segments Ionic v2
<ion-toolbar>
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
<ion-segment-button value="first">
First
</ion-segment-button>
<ion-segment-button value="second">
Second
</ion-segment-button>
<ion-segment-button value="third">
Third
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-content padding>
<ion-slides #mySlider (ionDidChange)="onSlideChanged($event)">
<ion-slide *ngFor="let slide of slides">
<h1>{{ slide.title }}</h1>
</ion-slide>
</ion-slides>
</ion-content>
<style>
ion-scroll {
width: 100%;
height: 100%;
}
</style>
import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
@Component({
selector: 'page-slidespage',
templateUrl: 'slidespage.html'
})
export class SlidesPage {
@ViewChild('mySlider') slider: Slides;
selectedSegment: string;
slides: any;
constructor(public navCtrl: NavController) {
this.selectedSegment = 'first';
this.slides = [
{
id: "first",
title: "First Slide"
},
{
id: "second",
title: "Second Slide"
},
{
id: "third",
title: "Third Slide"
}
];
}
onSegmentChanged(segmentButton) {
console.log("Segment changed to", segmentButton.value);
const selectedIndex = this.slides.findIndex((slide) => {
return slide.id === segmentButton.value;
});
this.slider.slideTo(selectedIndex);
}
onSlideChanged(slider) {
console.log('Slide changed');
const currentSlide = this.slides[slider.activeIndex];
this.selectedSegment = currentSlide.id;
}
}
@CliffyMk
Copy link

CliffyMk commented Aug 8, 2017

any hack to get the active segment visible on the screen, when the segment if off screen .

@dilip90
Copy link

dilip90 commented Oct 24, 2017

I am having same issue @CliffyMk.

@NurdinDev
Copy link

@aarjithn thanks for sharing your code, did you try to make segment part scrollable with a slider?

@gokujy
Copy link

gokujy commented Mar 7, 2018

working fine, thanks for your help

@guillermogfer
Copy link

guillermogfer commented Mar 12, 2018

@nuruddinXbadawi to make the slider scrollable you have to set "height" to auto

ion-slides {
    height: auto !important;
}

Also to update on this, the event on the slider has to be named ionSlideDidChange instead ionSlideDidChange

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">

and I also had to change slider.activeIndex into slider.getActiveIndex()

onSlideChanged(slider) {
    console.log('Slide changed');
    const currentSlide = this.slides[slider.activeIndex];
    this.selectedSegment = currentSlide.id;
  }

@ManigandanRaamanathan
Copy link

How to make the first segment activated by default when the segment buttons is dynamic? ngModel is only working if the data is static which already hardcoded.

@LucasTsolakian
Copy link

Unfortunately this is broken in ionic 5 and IonSlides.

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