Ионный 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

Это не рекомендуемый способ взаимодействия с DOM в приложениях Angular/Ionic. Это может привести к некоторым проблемам с производительностью. – sebaferreras

Конечно, я понимаю. Но я не нашел другого способа сделать то, что хочу ... –

О, хорошо. Позже сегодня я отредактирую ваш ответ и включу _ionic way_, чтобы сделать то же самое :) – 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

Спасибо, что работает! Но как я могу изменить размер изображения? Я попытался изменить ширину, но это не эффективно. –

Как я могу динамически изменить URL-адрес изображения? –

Вы когда-нибудь выясняли, как изменить URL-адрес картинки? – nareeboy

Ионный 2: Используйте изображение в кнопке табуляции

ответ

Смежные вопросы