Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save bipoza/f999261dd5fa4bb1adce695b4de27d59 to your computer and use it in GitHub Desktop.
Save bipoza/f999261dd5fa4bb1adce695b4de27d59 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') slider: IonSlides;
segment = 0;
constructor(
) { }
ngOnInit() {
}
async segmentChanged() {
await this.slider.slideTo(this.segment);
}
async slideChanged() {
this.segment = await this.slider.getActiveIndex();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment