Change color icon when changing slides


#1

Hello,

I would like change the color of the icons in my toolbar on the top when I changing slides.

Here is my first slide :

And my second slide :

I would like my second icons become blue and my first icon become grey when I jump on the second slide.

Here is my code :

<ion-header>
  
  <ion-navbar color="primary">
    <ion-title color="primary">Créer un besoin</ion-title>
  </ion-navbar>
  
  <ion-toolbar>
    
    <!-- Icon 1 -->
    <div class="button1">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon name="create"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    
    <!-- Icon 2 -->
    <div class="button2">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="map"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    
    <!-- Icon 3 -->
    <div class="button3">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="calendar"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    
    <!-- Icon 4 -->
    <div class="button4">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="card"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    
  </ion-toolbar>
  
</ion-header>

<ion-content>
  
  <ion-slides>

    <!-- Slide 1 -->
    <ion-slide>
      <ion-item>
        <ion-label color="primary" stacked>Titre de votre besoin</ion-label>
        <ion-input [(ngModel)]="request.name" placeholder="Exemple : Ordinateur infecté"></ion-input>
      </ion-item>
      
      <ion-item>
        <ion-label color="primary" stacked>Description</ion-label>
        <ion-input  [(ngModel)]="request.quantity" placeholder="Décrivez ici votre problème" ></ion-input>
      </ion-item>
      
      <ion-item>
        <ion-label color="primary" stacked>Prix</ion-label>
        <ion-input  [(ngModel)]="request.price" placeholder="100 €" type="number"></ion-input>
      </ion-item>
    </ion-slide>
    
    <!-- Slide 2 -->
    <ion-slide>
      <ion-item>
        <ion-label color="primary" stacked>Votre position géographique</ion-label>
        <ion-input [(ngModel)]="request.name" placeholder="Exemple : Toulouse"></ion-input>
      </ion-item>
    </ion-slide>
    
  </ion-slides>
  
  <button class="suivant" ion-button full (click)="goToSlide()">Suivant</button>

</ion-content>

Thank’s in advance !


#2

no one to help me ? :frowning:


#3

set these vars in your scss.

$tabs-ios-tab-text-color-active
$tabs-ios-tab-icon-color

$tabs-md-tab-icon-color
$tabs-md-tab-icon-color-active

In your theme/variables.scss like so:

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$tabs-md-tab-icon-color:red;
$tabs-md-tab-icon-color-active:green;


#4

Thanks for the reply but I don’t use Tabs… I use ion-button like this :

<!-- Icon 1 -->
   <div class="button1">
     <ion-buttons start>
       <button ion-button icon-only>
         <ion-icon name="create"></ion-icon>
       </button>
     </ion-buttons>
   </div>
   
   <!-- Icon 2 -->
   <div class="button2">
     <ion-buttons start>
       <button ion-button icon-only>
         <ion-icon class="icon1" name="map"></ion-icon>
       </button>
     </ion-buttons>
   </div>
  

And I align them like that in my scss :

	.button1, .button2, .button3, .button4 {
		float: left;
		width: 25%;
		text-align: center;	
	}

Can someone explain to me how to change the color icons according to the slides ? :confused:

I think we can use the ionSlideDidChange which can gets the active index

Can someone come to my rescue?


#5

ok, do [color]="index == 1 ? 'active':'inactive' "

<!-- Icon 1 -->
   <div class="button1">
     <ion-buttons start>
       <button ion-button icon-only>
         <ion-icon name="create" [color]="index == 0 ? 'active':'inactive'></ion-icon>
       </button>
     </ion-buttons>
   </div>
   
   <!-- Icon 2 -->
   <div class="button2">
     <ion-buttons start>
       <button ion-button icon-only>
         <ion-icon [color]="index == 1 ? 'active':'inactive' name="map" ></ion-icon>
       </button>
     </ion-buttons>
   </div>

You have to add one var to your ts file named index and set it to the current slide index, when it changes.

And you have to add ‘active’ and ‘inactive’ or whatever you like to call them to your color vars in theme/variables.scss.


#6

Ok thank you I tried what you told me but the color stay grey

<!-- Icon 1 -->
    <div class="button1">
      <ion-buttons start>
        <button ion-button icon-only (click)="goToSlideOne()">
          <ion-icon name="create"  [color]="currentIndex == 0 ? 'active':'inactive'"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    
    <!-- Icon 2 -->
    <div class="button2">
      <ion-buttons start>
        <button ion-button icon-only (click)="goToSlideTwo()">
          <ion-icon class="icon1" name="map" [color]="currentIndex == 1 ? 'active':'inactive'"></ion-icon>
        </button>
      </ion-buttons>
    </div>
$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  //Custom color 
  orangé:     #ff6118,
  bleu:       #0099ff,
  active:     #0099ff,
  inactive:   #b4b4b4
);
  slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
  }

#7

try console.log(index) in your function to check if it works

you could try this :

  <ion-toolbar mode="md">
    <ion-segment mode="md" [(ngModel)]="index">
      <ion-segment-button value="0" (ionSelect)="selectTab(0)">
         <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1" (ionSelect)="selectTab(1)">
         <ion-icon name="ribbon"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

This worked for me.


#8

Yes currentIndex returns the good index.

Ok, your way is also good, how do you change the icon color ? Can you show me your function ?


#9

At first glance your code looks like it could / should work. It might be as simple as changing [color]=“currentIndex == to currentIndex === (3 equal signs)
Or try adding that code to the button as opposed to the icon. Not sure that icons have a [color] property. Also not sure if segment-buttons can be dynamically changed unless you’re using custom classes like [class.blue]


#10

the color changing on the segment button is there on default, nothing to coder exept for some style changes


#11

Ok guys thanks for your help, finaly I found a solution :

With *ngIf I put gray icons that are covered by a blue icon according to the slide like this :

    <!-- Icon 1 -->
    <div class="button1">
      <ion-buttons start>
        <button ion-button icon-only (click)="goToSlideOne()">
          <ion-icon class="iconActive" name="create" *ngIf="this.slides.getActiveIndex()===0"></ion-icon>
          <ion-icon class="iconInactive" name="create" color="inactive"></ion-icon>
        </button>
      </ion-buttons>
    </div>

    <!-- Icon 2 -->
    <div class="button2">
      <ion-buttons start>
        <button ion-button icon-only (click)="goToSlideTwo()">
          <ion-icon class="iconActive" name="map" *ngIf="this.slides.getActiveIndex()===1"></ion-icon>
          <ion-icon class="iconInactive" name="map" color="inactive"></ion-icon>
        </button>
      </ion-buttons>
    </div>

It’s not the best method but it works well :slight_smile:
If you have a better one I’m taking


#12

Here’s something I put together real quick. It’s not exactly aligned with your getActiveIndex() action, but you can probably make it work with a few simple changes.

html

 <button ion-button clear icon-only (click)="toggleNumber()"><ion-icon name="add" [color]="numberToToggle === 0 ? 'primary' : 'danger'"></ion-icon></button>

component.ts

numberToToggle: number;
 constructor(){
  this.numberToToggle = 0; // initializing it to arbitrary 0. Could be 1 also. 
 }

toggleNumber(){
 this.numberToToggle === 0 ? this.numberToToggle = 1 : this.numberToToggle = 0;
}

In your case I think it would be

[color]="slides.getActiveIndex() === 0 ? 'active' : 'inactive'"

Though best practice would be to assign the active index to a variable like I did with numberToToggle and use that instead of using a function in your html to assign color.
So when you goToSlideOne()

goToSlideOne(){
 this.numberToToggle = 0;
// or 
 this.numberToToggle = this.slides.getActiveIndex();
 }
goToSlideTwo(){
 this.numberToToggle = 1;
// or 
 this.numberToToggle = this.slides.getActiveIndex();

 }