flosrn
January 5, 2018, 9:44am
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 !
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;
flosrn
January 6, 2018, 3:07pm
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 ?
I think we can use the ionSlideDidChange which can gets the active index
Can someone come to my rescue?
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.
flosrn
January 6, 2018, 4:34pm
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();
}
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.
flosrn
January 6, 2018, 5:14pm
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 ?
jaydz
January 6, 2018, 8:00pm
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)[class.blue]
the color changing on the segment button is there on default, nothing to coder exept for some style changes
flosrn
January 6, 2018, 9:09pm
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
jaydz
January 6, 2018, 10:01pm
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.goToSlideOne()
goToSlideOne(){
this.numberToToggle = 0;
// or
this.numberToToggle = this.slides.getActiveIndex();
}
goToSlideTwo(){
this.numberToToggle = 1;
// or
this.numberToToggle = this.slides.getActiveIndex();
}
