Ионный 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>
Я не знаю, как это сделать, идея?
Ответы
Ответ 1
Наконец, я нахожу решение!
Я просто пишу в созданном 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]);
}
}
Ответ 2
предоставить настраиваемое имя 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