如何在实例化对象时添加 CSS StyleClass，而不是 object.addStyleClass("myStyle")

Question

我使用 SAPUI5，我想在对象实例化后立即将其添加到对象中。例如，我想将样式类 'foo' 添加到面板内的标签中。

我想做什么，但行不通：

var oPanel = new sap.m.Panel({
 content: new sap.m.Label({
 text: "Hello",
 styleClass: "foo"
 })
});

我不想做但确实有效的事情：

var oLabel = new sap.m.Label({
text: "Hello"
});
oLabel.addStyleClass("foo");

var oPanel = new sap.m.Panel({
content: oLabel
});

Answer 1

您甚至可以编写自己的自定义 classes，其中样式 class 是一个聚合。我还不确定如何做到这一点，但我能够使用 'color' 聚合编写自定义标签。

Answer 2

您可以为 return 您的控件实例创建一个函数，并在其中使用 addStyleClass 方法，以及您想要的其他方法

function getControlInstance(FnClass, sId, mSettings) {
    mSettings = mSettings || {};
    if (typeof sId !== "string") {
        mSettings = sId;
        sId = null;
    }
    var oControl = new FnClass(sId, mSettings);
    if (mSettings.styleClass) {
        mSettings.styleClass = mSettings.styleClass instanceof Array ? mSettings.styleClass : [mSettings.styleClass];
        mSettings.styleClass.forEach(function (sClass) {
            oControl.addStyleClass(sClass);
        });
    }
    return oControl;
}

这样使用

var a = getControlInstance(sap.m.HBox, {
    styleClass: "test",
    id: "asdoiasd",
    items: [
        new getControlInstance(sap.m.Text, {
            styleClass: "test",
            text: "Testing"
        })
    ]
})

Answer 3

还有另一个基于方法链的选项，它不需要内部元素的专用变量（我想这就是您不喜欢问题中的第二个变体的原因）：

var oPanel = new sap.m.Panel({
   content: new sap.m.Label({ text: "Hello" }).addStyleClass("foo")
});

如何在实例化对象时添加 CSS StyleClass，而不是 object.addStyleClass("myStyle")

How to add CSS StyleClass when instantiating object, instead of object.addStyleClass("myStyle")

css

sapui5