Question

我想创建一个继承自sap.suite.ui.commons.GenericTile的图块，并仅显示一个图标（位于图块中间的中心）。由于居中，我无法使用标准聚合或属性，因为它们将图标放置在特定位置（位于左下方）。

我尝试过以下但没有运气：

$.sap.declare("myAddTile");

sap.suite.ui.commons.GenericTile.extend("myAddTile", {

init: function() {
    // do something for initialization...
    sap.suite.ui.commons.GenericTile.prototype.init.call(this);
},
renderer: function(oRm, oControl) {
    var oPlusIcon = new sap.ui.core.Icon({
        src: 'sap-icon://sys-add'
    }).placeAt(oControl);
    sap.suite.ui.commons.GenericTileRenderer.render(oRm, oControl);
}
});

生成的图块为空...

Answer 1

我在渲染器上玩了一下，然后提出了这个解决方案：

    rm.write("<div");
    rm.addClass("myAddTileIcon");
    rm.addClass(oControl.getSize());
    rm.writeClasses();
    rm.writeAttribute("id", oControl.getId() + "-icon");
    rm.write(">");
    rm.renderControl(new sap.ui.core.Icon({
        src: 'sap-icon://sys-add',
        size: "5rem"
    }));
    rm.write("</div>");

当然，图标的正确对齐也需要注意：

.myAddTileIcon .sapUiIcon {
  font-family: SAP-icons;
  font-size: 5rem;
  line-height: inherit;
  cursor: default;
  text-align: center;
  display: block;
  padding-top: 20%;
  vertical-align: middle;
  color: grey;
}

如果有人评论如何以更优雅的方式解决这个问题，请发帖。

干杯

SAPUI5：创建以图标为中心的GenericTile

1 个答案: