Change ion-page background color when ion-slide transitions

Ionic Framework Ionic Vue
1

Hi, I want to change the background color of the entire page of my app each time an ion-slider transitions. I’m new to Vue3 and Ionic and wondering if someone can point me in the right direction. The code I have so far is this

<template>
  <ion-page>
    <ion-header>
      <h1>My Colorful Slider</h1>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-slides :options="slideOpts" @ionSlideTransitionStart="slideChange()">
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 2</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 3</p>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonContent, IonSlides, IonSlide,} from '@ionic/vue'

export default {
  name: 'Slider',
  components: { IonHeader, IonContent, IonPage, IonSlides, IonSlide,},
  setup() {
    const slideOpts = {
      autoplay: {
        delay: 5000,
      },
      loop: true,
    }
    return { slideOpts }
  },
  methods: {
      slideChange(event) {
	  /* Get current slide number and change class name of ion-page here? */
        console.log('slideChange')
      }
  },
}
</script>

<style scoped>
  ion-slides {
    height: 100%;
  }
  .ion-page {
    --ion-background-color: red;
  }
  .ion-page--2 {
    --ion-background-color: green;
  }
  .ion-page--3 {
    --ion-background-color: blue;
  }
</style>

I don’t know if this is the right start or not but if it is I don’t know how to get the active slide in slideChange method in order to set the right class attribute on the ion-page element. If this is possible then presumably I need to put a binding in the ion-page element?

I guess I’m just not confident this is even the right approach so I’m hoping someone might be able to steer me in the right direction before I go (further) in the wrong direction!

2

I would recommend setting the --background CSS Variable on your ion-content component instead. From there, you could set a class on ion-content every time you change slides.

3

Thanks. So effectively ion-page is outside of the scope of what you can modify inside a component? This will mean I need to move ion-header (and ion-footer, which I’d omitted above for brevity) inside ion-component, right? That means I miss their fixed properties if they’re nested inside ion-content, I believe. Is there any other way of targeting something higher up the DOM rather than rearranging the structure of the elements inside this component?

4

ion-page is really just a div so you can customize it, but its only purpose is for routing (see: Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps).

This will mean I need to move ion-header (and ion-footer , which I’d omitted above for brevity) inside ion-component , right? That means I miss their fixed properties if they’re nested inside ion-content , I believe. Is there any other way of targeting something higher up the DOM rather than rearranging the structure of the elements inside this component?

I am not sure I understand this part. If you want to change the background color of the page you are on, ion-content is the best way to do that. Maybe I misunderstood your original question?

5

The issue with setting the background on the ion-content element, is that I have an ion-header and ion-footer outside of that element. So setting the background on ion-content doesn’t fill the whole page. I actually want to use a background image or gradient rather than a flat color, so I really do need to be able to apply the background style to the whole page, not just the ion-content element. As I say, I can nest the header and footer inside ion-content but that breaks certain properties that I’d hoped to maintain on those elements.

6

You can use the fullscreen property on ion-content to have the content background flow under the header and footer:

<ion-content :fullscreen="true">...</ion-content>

Depending on what you have set for the background of the toolbars in your header and footer, you may need to set those to be transparent so you can see the ion-content background:

ion-header ion-toolbar,
ion-footer ion-toolbar {
  --background: transparent;
}
1 Like
7

Thanks, I appreciate your help :). Indeed that works, but I’m finding now that modifying the --ion-background-color property on the ion-content element means that every element inside <ion-content></ion-content> now needs to have its background manually reset. The drawback of CSS custom property inheritance I suppose. Do you know if there’s any way around that? This all seems to be a struggle!

8

--ion-background-color is a global variable used as the base background color for every component. I recommend sticking with targeting ion-content using the --background CSS Variable so you do not override all the other background colors.

Our Application Color Guide goes into a little bit more detail regarding these app variables.

9

Bingo, thank you so much :slight_smile: Now for how to figure out how to get the active slide and hook all of that stuff up.

1 Like