离子2：使用标签按钮中的图片

我在我的应用程序中使用离子选项卡，我想在选项卡按钮中使用图片。我想动态设置此图片。离子2：使用标签按钮中的图片

在我的情况下，我有一个帐户与不同的用户链接到它。我想根据所选用户更改我的标签图片。

我有这样的：

，我想这一点：

我的代码在我的标签：

<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>

我不知道如何要做到这一点，一个想法？

来源

2017-02-22 V. Pivet

请张贴一些代码，演示了试了一下。 –

我改变了我的帖子。我不知道你需要什么来更好地理解我想要做什么？ –

最后我找到一个解决办法！我只是写在创建的DOM。

我这样做：

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]); 
     } 
    }

来源

2017-07-03 14:34:37

这不是在Angular/Ionic应用中与DOM进行交互的推荐方式。这可能会导致一些性能问题。 – sebaferreras

当然，我明白。但我没有找到另一种方式去做我想要的东西... –

哦，好的。今天晚些时候，我会编辑你的答案，并且包括_ionic方式，完全一样:) – sebaferreras

给定制名称到tabIcon像

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

和CSS：

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

plunk

来源

2017-02-22 10:04:40

感谢它的工作！但我怎样才能改变图片的大小？我试图修改宽度，但不是有效的。 –

如何动态更改图片网址？ –

你有没有想过如何改变图片的网址？ – nareeboy

离子2：使用标签按钮中的图片

回答

相关问题