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

【问题标题】：SAPUI5: Create GenericTile with icon centeredSAPUI5：创建以图标为中心的 GenericTile
【发布时间】：2015-03-11 10:12:14
【问题描述】：

我想创建一个从 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);
}
});

生成的图块是空的...

【问题讨论】：

标签： html css tile sapui5

【解决方案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;
}

如果有人对如何以更优雅的方式解决此问题发表评论，请发表。

干杯

【讨论】：