How to add style class and icon to TabContainerItem in openui5 - sapui5

Question

How to add style class and icon to the TabContainerItem in openui5?
In TabContainerItem documentation there is no addStyleClass and icon properties which is possible in tabstrip by using tab title.
but I need to use TabContainerItem because it is having tabs menu which is useful in mobile device.
Can any one please help me
oTabContainer = new sap.m.TabContainer("tabContainer", {
items:
[
new sap.m.TabContainerItem({name: "tab1",
content: [
new sap.ui.core.mvc.JSView({id:"tab1",viewName:"oui5mvc.tab1"})
]}),
new sap.m.TabContainerItem({name: "tab2",
content: [
new sap.ui.core.mvc.JSView({id:"tab2",viewName:"oui5mvc.home"})
]}),
]
}).placeAt("content").addStyleClass("tabContainer");
Here is an example that i have tried.

Answer 1

Since sap.m.TabContainerItem inherits from Element directly and not from Control it does not offer addStyleClass.
However, you can still apply custom CSS to the TabContainerItem by adding a style class to the sap.m.TabContainer which targets its TabContainerItem children, like:
/* class tabContainer as your custom class added to the TabContainer */
/* custom TabContainerItem (selected) */
.tabContainer
.sapMTabStrip
.sapMTSTabsContainer
.sapMTSTabs
.sapMTabStripItem.sapMTabStripItemSelected {
color : green;
background : yellow;
}
/* custom TabContainerItem (unselected) */
.tabContainer
.sapMTabStrip
.sapMTSTabsContainer
.sapMTSTabs
.sapMTabStripItem {
color : white;
background : grey;
}
Here`s your adapted example. You can adjust this to your needs with basic CSS rules, then.
As far as I know, it is currently not supported to add an icon/image to the TabContainerItem. You can create a feature request for that on the issue tracker of the OpenUI5 project with the enhancement label or contribute it by yourself.