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"/>

在这里，标签元素在默认的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来为Label设置样式。

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

如果您决定使用CSS，请不要忘记在项目中包含fileName.css文件，并且将文件注册到您的manifest.json中作为资源。

Answer 2

以下是一些选择：

通过带有addStyleClass的JS进行应用：

   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;
}

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

2 个答案: