使用自定义数据和布局以编程方式创建图标属性

Question

我正在尝试从 xml 视图

中以编程方式创建此图标

<core:Icon
      src="sap-icon://sys-help-2"
      class="size1"
      dataHelp:description="{i18n>path.to.description}"
      width="100px"
      color="#1C4C98" >
      <core:layoutData>
            <l:GridData span="L1 M1 S1" />
      </core:layoutData>
</core:Icon>

我可以想出简单的道具：

  const icon = new sap.ui.core.Icon({
    src: 'sap-icon://sys-help-2',
    color: '#1C4C98',
    width: '100px'
  })
  icon.addStyleClass('size1');

但是对于 dataHelp:description 和 <core:layoutData> 我不知道也找不到任何好的例子。有可能吗？

Answer 1

嵌套属性（又名聚合）也可以使用 new 创建。

sap.ui.require([
    "sap/ui/core/Icon",
    "sap/ui/layout/GridData"
], function(Icon, GridData) {
    const oGridData = new GridData({ span: "L1 M1 S1" });
    const oIcon = new Icon({
        src: "sap-icon://sys-help-2",
        color: "#1C4C98",
        width: "100px",
        layoutData: oGridData
    });
    oIcon.data("description", this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("path.to.description"));
});

~~我从未听说过dataHelp:description，在任何 UI5 中都找不到它API。~~

可以使用 oControl.data("key", "value");

添加自定义数据

使用自定义数据和布局以编程方式创建图标属性

Create Icon programmatically with custom data and layout property

javascript

sapui5

使用自定义数据和布局以编程方式创建图标 属性

Create Icon programmatically with custom data and layout property

javascript

sapui5

使用自定义数据和布局以编程方式创建图标属性