如何用图标替换链接？

Question

我对UI5比较陌生。我搜索“[sapui5] icon link”没有带来任何有用的结果。所以这是我的问题。

我有以下sap.m.Link

<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />

在UI上显示文本“Stackoverflow”，当我点击它时，我将导航到 stackoverflow.com 。这就是我想要的效果。

但是如何用图标替换文字，例如"sap-icon://download"？根据Link-API，它没有属性icon。那么有一种方法可以使用 具有此属性的sap.m.Button来获得相同的效果：

<Button icon="sap-icon://download" press=".onDataExport" />

处理程序onDataExport看起来像什么？我的想法是使用（某种程度上）隐藏sap.m.Link和sap.m.Button包含图标。按钮的press - 处理程序会以某种方式触发“链接点击”（不确定是否可能）。

Answer 1

我的回答有点迟了，但我希望它会帮助其他人，因为我搜索了一个包含图标的即用型链接（虽然这似乎不是StoneCrusher的真正需要）。

触发链接导航的按钮：

如果你想让sap.m.Button充当经典链接，那么你可以附加一个新闻事件并在那个事件中使用window.open，如：

        myButton.attachPress(function () {
            window.open(url,target);
        });

与UI5图标链接：

如果要在sap.m.Link中显示sap-icon，则必须扩展链接，包含包含图标的聚合，然后在呈现链接文本之前呈现图标。 / p>

    renderer : function(oRm, oControl) {
        [...]
        oRm.write("<a"); 
        oRm.writeControlData(oControl);  
        oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
        oRm.writeClasses();
        oRm.write("href=\"javascript:void(0);\" ");
        oRm.write(">");
        //Render icon
        if (icon!="") {
            oControl.getAggregation("_icon").setIcon(icon);
            oRm.renderControl(oControl.getAggregation("_icon"));
        } 
        oRm.writeEscaped(text);
        oRm.write("</a>");
    }

我需要两者并在此处发布这些和其他自定义UI5便利控件：www.toucon.fr

Answer 2

在控制器的onDataExport功能中使用以下代码：

sap.m.URLHelper.redirect("https://stackoverflow.com/", true);

有关信息，请参阅以下链接：ui5.sap.com/#/sample/sap.m.sample.Link/preview

Answer 3

抱歉只得到了JSON风格的回复，但是你看到代码中缺少的内容：

jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");

var button = new sap.ui.commons.Button({
  icon : sBack,
});

Answer 4

将用户定向到新页面

onIconPress: function() {
  sap.ui.require(["sap/m/library"], lib => lib.URLHelper.redirect("https://example.com"));
},

URLHelper不是一个单独的模块，而是在sap.m-library中定义的。因此，应从所需的库模块中访问它。

在redirect()中作为第二个参数的附加布尔值可以决定是否应在新窗口中打开目标页面。有关更多信息，请参见API reference: URLHelper.redirect。

---

用图标替换链接

替换链接时，我假设图标的高度应与以前的链接文本的高度相同。为此，至少有两个选择：

• 使用sap.ui.core.Icon ^api

  <core:Icon xmlns:core="sap.ui.core"
    src="sap-icon://download"
    size="1rem"
    press=".onIconPress"
  />
  

  ^{设置size="1rem"是指与文本相同的大小。}

• 使用sap.m.ObjectStatus ^api

  <ObjectStatus xmlns="sap.m"
    icon="sap-icon://download"
    active="true"
    press=".onIconPress"
  />
  

ObjectStatus还支持将图标与文本一起显示。为此，可以定义属性text。