Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
}
}
@rabiatuladawiyah08

This comment has been minimized.

Copy link

rabiatuladawiyah08 commented Aug 17, 2019

hi i was wondering why my @ViewChild('slides') in @ViewChild('slides') slider: IonSlides; have error? it said something about 2 arguements expected but got 1, and opts argyement was not provided.

@mdorchain

This comment has been minimized.

Copy link
Owner Author

mdorchain commented Aug 17, 2019

With angular 8, there are some breaking changes to @ViewChild.
@ViewChild('slides') slider: IonSlides;
should be replaced by
@ViewChild('slides', { static: true }) slider: IonSlides;

@rabiatuladawiyah08

This comment has been minimized.

Copy link

rabiatuladawiyah08 commented Aug 17, 2019

ohh, it works ! thank you so much.

@mdorchain

This comment has been minimized.

Copy link
Owner Author

mdorchain commented Aug 17, 2019

welcome ;)

@erperejildo

This comment has been minimized.

Copy link

erperejildo commented Aug 22, 2019

Thanks for this. This should be added to Ionic documentation

@RicardoElSabio

This comment has been minimized.

Copy link

RicardoElSabio commented Sep 28, 2019

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

@mdorchain

This comment has been minimized.

Copy link
Owner Author

mdorchain commented Sep 28, 2019

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

@hamzahalvanaa

This comment has been minimized.

Copy link

hamzahalvanaa commented Oct 12, 2019

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.

@mdorchain

This comment has been minimized.

Copy link
Owner Author

mdorchain commented Oct 12, 2019

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

@hamzahalvanaa

This comment has been minimized.

Copy link

hamzahalvanaa commented Oct 25, 2019

how to adjust ion-slide content to full height?

@mdorchain

This comment has been minimized.

Copy link
Owner Author

mdorchain commented Oct 25, 2019

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

@AnuGreenbots

This comment has been minimized.

Copy link

AnuGreenbots commented Nov 7, 2019

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 .

@AnuGreenbots

This comment has been minimized.

Copy link

AnuGreenbots commented Nov 7, 2019

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.
.

@waptik

This comment has been minimized.

Copy link

waptik commented Nov 27, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.