openui5のTabContainerItemにスタイルクラスとアイコンを追加する方法

Question

openui5のTabContainerItemにスタイルクラスとアイコンを追加するにはどうすればいいですか？ TabContainerItem文書では、ではtab titleを使用するとaddStyleClassとiconのプロパティはありません。 モバイルデバイスで便利なtabs menuを持っているので、TabContainerItemを使用する必要があります。 はいずれも

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

ElementはControlから直接継承しているため、addStyleClassは提供していません。

しかし、あなたはまだのように、そのTabContainerItemの子どもたちを対象sap.m.TabContainerにスタイルクラスを追加することによって、TabContainerItemにカスタムCSSを適用することができます。

/* 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あなた適応example。これを基本的なCSSルールで必要に応じて調整できます。

私が知る限り、現在、アイコン/画像をTabContainerItemに追加することはサポートされていません。 enhancementというラベルを持つissue tracker of the OpenUI5 projectの機能リクエストを作成するか、自分で投稿できます。