web-dev-qa-db-fra.com

Changer d'icône lorsque vous cliquez sur le bouton ionique 2

j'essaie de changer l'icône lorsque vous cliquez sur le bouton Afficher son contenu masqué J'ai besoin de changer d'icône de flèche 

<button clear text-center (click)="toggle()">
 <ion-icon name="arrow-dropdown-circle"></ion-icon>
 </button>

<ion-col [hidden]="!visible" class="accountBalance animated slideInUp">
       <ion-list>
          <ion-item>
            <h3>limit</h3>
                <ion-note item-right>
                    <h2>&#x20B9; 55000.00</h2>
                </ion-note>
          </ion-item>
<ion-list></ion-col>

fichier.ts

visible = false;
  toggle() {
   this.visible = !this.visible;
  }
angularionic-frameworkionic2
13
sridharan

Vous pouvez utiliser la directive *ngIf ici pour afficher l’icône conditionnelle.

<button clear text-center (click)="toggle()">
   <ion-icon name="arrow-drop down-circle" *ngIf="!visible"></ion-icon>
   <ion-icon name="arrow-drop up-circle" *ngIf="visible"></ion-icon>
</button>

Vous pouvez utiliser la propriété name au lieu de créer deux icônes ioniques différentes.

<button clear text-center (click)="toggle()">
   <ion-icon 
       [name]="visible ? 'arrow-drop up-circle' :'arrow-drop down-circle'">
   </ion-icon>
</button>
23
Pankaj Parkar

Vous pouvez créer une condition dans l'attribut name= 

<ion-icon [name]="visible ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon>
8
user1752532

Cela m’a pris une éternité à trouver car il existe très peu d’exemples de basculement d’icônes. Cependant, j'ai utilisé le Ionic 2 Icons Doc et j'ai trouvé ceci:

ts:

class ToggleIconsPage {
    buttonIcon: string = "home";

    toggleIcon(getIcon: string) {

      if (this.buttonIcon === 'star') {
        this.buttonIcon = "home";
      }
      else if (this.buttonIcon === 'home') {
        this.buttonIcon = "star";
      }
   }
}

html: 

<button #myButton ion-button icon-only (click)="toggleIcon()">
    <ion-icon [name]="buttonIcon"></ion-icon>
</button>

Voir mon CodePen à titre d'exemple. 

J'espère que cela t'aides!

2
Sean Locklin

Je devais résoudre le problème, sauf que mon code nécessitait une résolution plus programmatique, car de nombreux éléments étaient ajoutés. Initialement, j'ai essayé d'utiliser une variable visible, comme dans l'exemple ci-dessus. Cependant, depuis que j'ai ajouté plusieurs éléments, l'utilisation de la variable visible aurait pour effet de tous les activer/désactiver. Au lieu de cela, j’ai fait ce qui suit, puisque chacun de mes éléments avait un identifiant unique key:

export class WhateverPage {
  private visible = []; 
...
...
...
  toggle(key) {
    var index = this.visible.indexOf(key);
    if (index > -1) {
      this.visible.splice(index, 1);
    } else {
      this.visible.Push(key);
    }
  }

ET

<ion-icon ios="ios-add-circle" md="md-add-circle" (click)="toggle(key)" *ngIf="!visible.includes(key)"></ion-icon> 
<ion-icon ios="ios-checkmark" md="md-checkmark" (click)="toggle(key)" *ngIf="visible.includes(key)"></ion-icon>
1
maudulus