-
-
Save mdorchain/90ee6a0b391b6c51b2e27c2b000f9bdd to your computer and use it in GitHub Desktop.
<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(); | |
} | |
} |
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.
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
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.