Sliding boxes implementation - what's the proper UI name?

ionic
#1

How can I implement a view similar to the iOS weather app feature where I can swipe between the hourly / daily forecast. How is this item called?

I’m referring to the now, 9PM, 10PM bar in the screenshot link below? What should I look for?
Is this somehow available in ionic?
Thanks!

1500×750 254 KB

#2

you can use <ion-list> with <ion-slides> on top of it

#3

Thanks ! Any example code you know?

#4

this is a very basic implementation

<ion-content>
    <ion-slides [options]="{slidesPerView: 7}">
      <ion-slide class="hour" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
        <ion-label>wed</ion-label>
        <ion-icon name="cloud"></ion-icon>
        <ion-label>50</ion-label>
      </ion-slide>
    </ion-slides>
    <ion-list>
      <ion-item lines="none" class="day" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
        <ion-label>sunday</ion-label>
        <ion-icon name="cloud"></ion-icon>
        <ion-label class="ion-text-end">45 45</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

.hour{
  display: flex;
  flex-direction: column;
}
.day{
  display: flex;
}

and if you want the <ion-slides> to be sticky you can put it in the <ion-header> tag

additionally you can look at this npm package that can help you with the shrinking header situation

1 Like
#5

I just got to this now, it works great for starters.
How can I size down the width of the slide item?
With the above code the size of the slides are same width as the screen.
Thanks for the help! :slight_smile:

#6

I would suggest going through the copious Swiper documentation. Keep in mind that mobile device screen orientations tend to be myriad and shifting.

#7

That looks great. How can I get

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

the constructor with the native ionic slider? ^ taken from multiple slide demo

#8

Nevermind, found it in the ionic documentation…