離子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：使用標籤按鈕中的圖片

回答

相關問題