Question

以下是UI5的一个片段。我已经分配了一个班级=＆＃34; myGreen＆＃34;是我创建的自定义CSS样式。我能够得到所有瓷砖都是绿色的，这是好的。但我想为每个瓷砖发送不同的样式。喜欢myRed或myYellow。如果我尝试通过JSON发送这些类名，则图块颜色不会改变。我在标签{myModel1＆gt; className}中传递了它。如果无法使用以下方法，我们如何从片段中读取图块并更改其颜色？

 <StandardTile 
    icon="{myModel1>icon}"  
    number="{myModel1>number}"  
    info="{myModel1>info}"
    infoState="{myModel1>infostate}" 
    title="{myModel1>title}" 
    numberUnit="{myModel1>numberunit}"
    press="handleTilePress"
    class="{myModel1>className}"/>

没有JSON发送类名的代码如下：

    <core:FragmentDefinition xmlns="sap.m"
                          xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout">
 <Page id="tileInfo" showHeader="false" enableScrolling="true" > 
    <TileContainer    
      id="getTiles"

      tiles="{myModel1>TILECOLLECTION}">    
      <StandardTile 
        icon="{myModel1>icon}"  
        number="{myModel1>number}"  
        info="{myModel1>info}"
        infoState="{myModel1>infostate}" 
        title="{myModel1>title}" 
        numberUnit="{myModel1>numberunit}"
        press="handleTilePress"
        class="myGreen"    
        />   
        </TileContainer>   
       </Page> 
</core:FragmentDefinition>

Answer 1

此要求的解决方法是在任何属性上使用formatter函数并使用addStyleClass方法。解决方案2：不是一个优雅的解决方案也不是动态的。您可以使用css来更改瓷砖的颜色，如下所示。

    .sapMTile:nth-child(1){
  background:red;
}
.sapMTile:nth-child(2){
  background:blue;
}
.sapMTile:nth-child(3){
  background:green;
}

sample jsbin

Answer 2

<StandardTile 
    icon="{myModel1>icon}"  
    number="{myModel1>number}"  
    info="{myModel1>info}"
    infoState="{myModel1>infostate}" 
    title="{myModel1>title}" 
    numberUnit="{myModel1>numberunit}"
    press="handleTilePress">   
        <customData>
            <core:CustomData key="css" value="myGreen" writeToDom="true" />
        </customData>
</StandardTile>

根据自定义数据控件的模型绑定键和值

对于CSS选择器，请使用以下代码

div[data-css="myGreen"] { border: 3px solid #000; }

Answer 3

以下是答案：

    onBeforeRendering: function(oEvent) {
        var fragmentId = this.getView().createId("myFragment");
        var tileContainer = sap.ui.core.Fragment.byId(fragmentId,"getTiles");
        var oTiles = tileContainer.getTiles();
            oTiles.addStyleClass('myGreen');
    },

从片段SAP UI5中读取Tile

3 个答案: