文本和图标的面包屑答案

【问题标题】：Breadcrumbs for Text and Icon文本和图标的面包屑
【发布时间】：2019-08-21 09:32:53
【问题描述】：

我有一个场景，我需要在面包屑中显示文本和图标。我已经尝试过，但输出不符合预期。我正在寻求一些 CSS 帮助。我在下面的链接中尝试了我的代码。我使用的 CSS 类在所有浏览器中的行为都不同，尤其是在 IE 中。我们在 IE 上运行我们的应用程序。

"https://jsfiddle.net/karthikspandian/mw9vq5z2/7/"

场景：源名称 ---> 图标图像 ---> 目标名称

我期待这种 CSS。

"https://codepen.io/team/css-tricks/pen/xRmmdr"

【问题讨论】：

你可以用这个codepen.io/CiTA/pen/moNQgY
我正在我的框架中寻找一个单独的按钮。

标签： css sapui5 breadcrumbs

【解决方案1】：

我认为更简单的方法是覆盖 Link 控件。

sap.ui.define([
  "sap/ui/core/Icon",
  "sap/m/Breadcrumbs",
  "sap/m/Link",
  "sap/m/LinkRenderer"
], function(Icon, Breadcrumbs, Link, LinkRenderer) {
  
  Link.extend("LinkIcon", {
    metadata: {
      properties: {
        icon: "sap.ui.core.Icon"
      }
    },
    renderer: function(oRm, oControl) {
      oRm.write("<span");
      oRm.writeControlData(oControl);
      oRm.write(">");
      if (oControl.getIcon()) {
        oRm.renderControl(oControl.getIcon());
      } else {
        LinkRenderer.render(oRm, oControl);
      }
      oRm.write("</span>");
    }
  });
  
  var oBreadcrumbs = new Breadcrumbs({
    links: [
      new LinkIcon({
        icon: new Icon({
          src: "sap-icon://document" 
        }),
        press: function() {
          console.log("document");
        }
      }),
      new Link({
        text: "awesome",
        press: function() {
          console.log("awesome");
        }
      }),
      new LinkIcon({
        icon: new Icon({
          src: "sap-icon://email" 
        }),
        press: function() {
          console.log("email");
        }
      })

    ]
  });
  
  oBreadcrumbs.placeAt('content');
});

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m,sap.ui.table" 
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-theme="sap_fiori_3"></script>	
  </head>
  <body id="content" class="sapUiBody sapUiSizeCompact">
  </body>
</html>

【讨论】：