SAPUI5 Modification de la couleur de l'icône

Question

Je souhaite utiliser une icône et modifier la couleur en fonction du modèle.

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({ 
    icon: "sap-icon://upload-to-cloud" 
}); 

Comment puis-je définir la couleur de l'icône à quelque chose comme ceci:

style: "color:{/oSettingsModel/isOnline}" 

De cette façon, l'icône changerait de couleur, quand je change isOnline dans le oSettingsModel.

Answer 1

Eh bien, semble que ce contrôle n'a pas non plus une possibilité de spécifier la couleur via la propriété standard, donc vous pouvez appliquer la solution de contournement en utilisant custom data attribute et expression binding.

Le point principal est que vous pouvez spécifier le writeToDom attribut de l'élément de données personnalisées, et dans votre CSS, vous pouvez définir le style de la valeur de l'attribut HTML nécessaire: données couleur vert ou Data- couleur rouge.

JS:

var wirelessHeadItem = new sap.ui.unified.ShellHeadItem({ 
    icon: "sap-icon://upload-to-cloud", 
    customData: [ 
     new sap.ui.core.CustomData({ 
      key: "color", 
      value: "{= ${/oSettingsModel/isOnline} ? 'green' : 'red' }", 
      writeToDom: true 
     }); 
    ] 
}); 

CSS pourrait ressembler à ceci:

div[data-color=green] { 
    color: green; 
} 
div[data-color=red] { 
    color: red; 
}