CODEWITHSUNDEEP
csssapui5breadcrumbs
karthik stj
karthik stj

Reputation: 57

Breadcrumbs for Text and Icon

I have a scenario where I need to display the text and icon in breadcrumbs.I have tried but output is not as expected.I am seeking some CSS assistance. I have tried my code in below link. The CSS class which I have used is behaving differently in all browsers especially in IE.We are running our app on IE. 

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

Scenario: Source Name ---> Icon Image ---> Destination Name

I am expecting this kind of CSS.

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

Upvotes: 1

Views: 454

Answers (1)

D. Seah
D. Seah

Reputation: 4592

I think the easier way is to override the Link control.

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>

Upvotes: 1

Related Questions