2017-02-22 22 views
11

में चित्र का उपयोग करें मैं अपने ऐप में आयन-टैब का उपयोग करता हूं और मैं एक टैब-बटन में एक तस्वीर का उपयोग करना चाहता हूं। मैं इस तस्वीर को गतिशील रूप से सेट करना चाहता हूं।आयनिक 2: टैब बटन

मेरे मामले में, मेरे पास इसके साथ जुड़े विभिन्न उपयोगकर्ताओं के साथ एक खाता है। मैं चयनित उपयोगकर्ता के आधार पर अपनी टैब तस्वीर बदलना चाहता हूं।

मैं इस है:

enter image description here

और मैं इस हैं:

enter image description here

मेरे मेरी टैब में कोड:

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

मैं पता नहीं कैसे ऐसा करने के लिए, एक विचार?

+0

कुछ कोड प्रदर्शित करता है कि आप क्या करने की कोशिश की पोस्ट करें। –

+0

मैंने अपनी पोस्ट बदल दी। मुझे नहीं पता कि आपको बेहतर समझने की क्या ज़रूरत है कि मैं क्या करना चाहता हूं? –

उत्तर

3

अंत में मैं एक समाधान खोजने के! मैं सिर्फ निर्मित डोम में लिखता हूं।

मैं इस तरह कार्य करें:

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

यह कोणीय/आयनिक ऐप्स में डीओएम के साथ बातचीत करने का अनुशंसित तरीका नहीं है। यह कुछ प्रदर्शन मुद्दों का कारण बन सकता है। – sebaferreras

+1

निश्चित रूप से, मैं समझता हूं। लेकिन मुझे जो कुछ चाहिए वो करने के लिए मुझे कोई और रास्ता नहीं मिला ... –

+2

ओह, ठीक है। बाद में आज मैं आपका जवाब संपादित करूँगा और _ionic way_ को बिल्कुल वही करने के लिए शामिल करूंगा :) – sebaferreras

9

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

की तरह और सीएसएस में tabIcon करने के लिए कस्टम नाम दे:

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

plunk

+0

धन्यवाद यह काम करता है! लेकिन मैं तस्वीर के आकार को कैसे बदल सकता हूं? मैंने चौड़ाई को संशोधित करने की कोशिश की लेकिन यह प्रभावशाली नहीं है। –

+0

मैं चित्र URL को गतिशील रूप से कैसे बदल सकता हूं? –

+0

क्या आपने कभी तस्वीर यूआरएल को बदलने का तरीका बताया है? – nareeboy

संबंधित मुद्दे