Hi,
After a long time, found some time to share something which I have worked on.
Recently, I had a requirement which demanded me to have navigation using a breadcrumb. Just a brief description of breadcrumb is as follows:
"A breadcrumb is a link/button(or a series of them) which displays each page viewed by a visitor of a website in the order the pages were viewed".
Something as shown in the figure:
In one of the recent releases SAP has releases a control called breadcrumb. But that did not go well my projects requirement mainly because of the look and feel. As this how it looked:
So, just thought of trying my hand in designing the breadcrumb look alike using sap.m.SegmentedButton wrapped in a custom css.
Segmented Button normally looks like:
Following is the code for implementing it.
| View.xml |
|---|
<mvc:View controllerName="BreadCrumbsDemo.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <App> <pages> <Page title="{i18n>title}"> <content> <HBox class="breadCrumbs" width="100%" alignItems="Center"> <SegmentedButton class="sapUiSmallMarginBottom" width="100%" height="100%"> <items> <SegmentedButtonItem text="View1"/> <SegmentedButtonItem text="View2"/> <SegmentedButtonItem text="View3"/> </items> </SegmentedButton> </HBox> </content> </Page> </pages> </App> </mvc:View> |
| style.css |
|---|
.breadCrumbs> .sapMFlexItem ul li { width: 25.3333333333333% !important; display: block; float: left; height: 48px; background: #85c1e9; text-align: center; padding: 0px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; } .breadCrumbs> .sapMFlexItem ul li:first-child { z-index:3; } .breadCrumbs> .sapMFlexItem ul li:nth-child(2) { z-index:2; } .breadCrumbs> .sapMFlexItem ul li:nth-child(3) { z-index:1; } .breadCrumbs> .sapMFlexItem ul li:last-child { background: #2e86c1 !important; color: #000; } .breadCrumbs> .sapMFlexItem ul li:last-child:after { border-left: 40px solid #2e86c1 !important; } .breadCrumbs> .sapMFlexItem ul li:before { content: ""; border-top: 24px solid transparent; border-bottom: 24px solid transparent; border-left: 40px solid #e6e6e6; position: absolute; left: 0; top: 0; padding: 0px 40px 0 80px; } .breadCrumbs> .sapMFlexItem ul li:after { content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; border-top: 24px solid transparent; border-bottom: 24px solid transparent; border-left: 40px solid #85c1e9; } .breadCrumbs> .sapMFlexItem { width: 100%; background:#e6e6e6; } .breadCrumbs .sapMSegB .sapMSegBBtn { list-style: none; text-overflow: ellipsis; overflow: initial; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: center; cursor: pointer; vertical-align: text-bottom; box-sizing: border-box; display: inline-block; border:none; } .breadCrumbs .sapMSegBBtn.sapMSegBBtnFocusable.sapMSegBBtnSel + .sapMSegBBtn { border-left: none; } |
Ultimately, this is what you have.
Could always be better used with much better css.