javascript - 如何在 SAPUI5 中动态地将样式应用于标签元素

Question

我是 SAPUI5 的新手，正在尝试将一些样式应用于标签元素。下面是 Controller 中的一段代码。

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

下面是 view.xml 中标签元素的代码行。

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

在这里，label 元素在具有默认 css 类的 div 中呈现。我试图通过在标签元素的父级 div 元素上应用来调整宽度。

这没有生效。如果有人遇到同样的情况，请分享解决方案。

呈现的 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(es) 来设置标签样式。

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

如果您决定使用 css，请不要忘记在您的元素中包含一个 fileName.css 文件，并且 在您的 manifest.json 中将文件注册为资源。