web-dev-qa-db-fra.com

Ionic 2: Utiliser l'image dans l'onglet

J'utilise des onglets d'ions dans mon application et je souhaite utiliser une image dans un bouton d'onglets. Je souhaite définir cette image de manière dynamique. 

Dans mon cas, j'ai un compte avec différents utilisateurs qui y sont liés. Je souhaite modifier l'image de l'onglet en fonction de l'utilisateur sélectionné.

J'ai ceci : 

 enter image description here

Et je veux ceci: 

 enter image description here

Mon code dans mes onglets:

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

Je ne sais pas comment faire ça, une idée?

javascriptangulartabsionic2
11
V. Pivet

Enfin je trouve une solution! Je viens d’écrire dans le DOM créé. 

J'aime ça: 

updateAccountTab() : void {
      let array = document.getElementsByClassName('tabbar');
      let tabbar = array[0];
      let element = tabbar.childNodes[tabbar.childElementCount-1];
      if(element) {
          element.removeChild(element.childNodes[1]);
          let img = document.createElement("img");
          img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-md");
          img.setAttribute("src", this.pdata.user.profile_thumbnail);
          element.insertBefore(img, element.childNodes[1]);
      }
  }
3
V. Pivet

donner un nom personnalisé à tabIcon comme

<ion-tab [root]="MenuPage"
       tabsHideOnSubPages="true"
       tabIcon="customicon"
       tabTitle="Menu">
</ion-tab>

et en css:

.ion-ios-customicon-outline,
.ion-ios-customicon,.ion-md-customicon,.ion-md-customicon-outline {
  content: url('imageurl');
}

plunk

11
varun aaruru

Dans votre html: 

<ion-tabs tabsHighlight="false" #myTab>
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
</ion-tabs>

Dans votre fichier de composant (ts): 

import { ViewChild } from '@angular/core';
import {Tabs} from 'ionic-angular';
export class TabsPage {

  @ViewChild('myTab') tabRef: Tabs;
  constructor(public navCtrl: NavController) {

  }
  ngAfterViewInit() {
    let tabbar = this.tabRef._tabbar.nativeElement;
    let element = tabbar.childNodes[tabbar.childElementCount-1];
    if(element) {
      element.removeChild(element.childNodes[1]);
      let img = document.createElement("img");
      img.setAttribute("class", "tab-icon-custom");
      img.setAttribute("src", 'https://picsum.photos/200');
      element.insertBefore(img, element.childNodes[1]);
    }

  }
}

Dans votre fichier scss: 

.tab-icon-custom {
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    width: 50px;
    border-radius: 50%;
 }
0
Sabyasachi Patra