Question

如何在openui5中向TabContainerItem添加样式类和图标？在TabContainerItem文档中，使用addStyleClass在icon中无法使用tabstrip和tab title属性。但我需要使用TabContainerItem，因为它有tabs menu，这在移动设备中非常有用。任何人都可以帮助我

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");

这是我尝试过的example。

Answer 1

由于sap.m.TabContainerItem直接从Element继承，而不是从Control继承，因此不会提供addStyleClass。

但是，您仍然可以通过向sap.m.TabContainer添加样式类来将自定义CSS应用于TabContainerItem，该样式类定位到其TabContainerItem子项，例如：

/* 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;
}

这是你改编的example。您可以根据自己的需要使用基本的CSS规则进行调整。

据我所知，目前不支持向TabContainerItem添加图标/图像。您可以使用enhancement标签在issue tracker of the OpenUI5 project上为其创建功能请求，也可以自行提供。

如何在openui5中向TabContainerItem添加样式类和图标

1 个答案: