如何在SAPUI5中動態將樣式應用於標簽元素

Question

我是SAPUI5的新手，正在嘗試將一些樣式應用於label元素。 以下是控制器中的部分代碼。

onAfterRendering: function() {
    var busFunId = this.getView().byId("busFun");
    jQuery.sap.byId(busFunId.getId()).parent().css("width", "20%");
},

下面是view.xml中label元素的代碼行。

<Label text="Business Function" id="busFun"/>

在這里，label元素在具有默認css類的div中呈現。 我試圖通過應用div元素（label元素的父元素）來調整寬度。

這沒有生效。 如果有人遇到同樣的問題，請分享解決方案。

呈現的HTML：

 <div class=""><label id="busFun" />sample</label></div> 

預期的HTML：

 <div class="" style="width:20%"><label id="busFun" />sample</label></div> 

Answer 1

如果只想調整寬度，則不要添加樣式，而要使用width屬性。 （檢查sap.m.Label以獲取更多可以使用的屬性）。

<Label text="Business Function" width="20%"/>

如果屬性不足以進行樣式設置，則可以使用css-class來為Label設置樣式。

<Label class="custom" text="Business Function" width="20%"/>

如果您決定使用css，請不要忘記在項目中包含fileName.css文件，並在manifest.json文件中將該文件注冊為資源。

Answer 2

以下是一些選擇：

通過JS與addStyleClass一起應用：

   this.getView().byId('yourControlId').addStyleClass("cssYouLoaded");

通過清單加載css文件：

"resources": {
            "css": [
                {
                    "uri": "content/css/style.css"
                }
            ]
        }

並應用於您的元素：

<Label text="Business Function" id="busFun" class="style"/>

如果您要定義css文件，請不要偽造！important。 sapui5 CSS通常會覆蓋您的自定義代碼。

.imagemCabecalho {
  margin: 0 !important;
  padding: 0.4em !important;
  visibility: visible;
  width: 8em;
}