Badge is commonly used these days. So I am sharing an implementation of badge control.
CSS
.sap-dennisseah-badge { margin: 2px; display: flex; border-radius: 6px; font-size: 12px; height: 30px; opacity:0.8; justify-content: flex-start; cursor:pointer
}
.sap-dennisseah-badge:hover {
opacity:1;
}
.sap-dennisseah-badge-text{
margin: 3px; background-color: transparent; white-space: nowrap; display: block; padding: 5px; color: #fff; text-overflow: ellipsis; overflow: hidden; font-weight: 550;
}
.sap-dennisseah-badge-num {
margin-top: 6px; margin-right: 10px; padding-top:2px; background-color: #FFF; width: 40px; text-align:center; border-radius: 5px; height: 15px; font-weight: bold; color: #333;
}Javascript
sap.ui.core.Control.extend('sap.dennisseah.Badge', { metadata: { properties: { text: {type:'string', defaultValue: 'untitled'}, value: {type:'int', defaultValue: 0}, width: {type: 'sap.ui.core.CSSSize', defaultValue: '150px'}, color: {type: 'sap.ui.core.CSSColor', defaultValue: '#007cc0'} }, events: { pressed: {} } }, _width : function(minus) { var w = parseInt(this.getWidth().replace('px', '')) + minus; return w + 'px'; }, _style : function() { var styles = [ 'background-color: ' + this.getColor(), 'width: ' + this.getWidth() ]; return styles.join(';'); }, renderer: function(oRm, oControl) { oRm.write("<div"); oRm.writeControlData(oControl); oRm.addClass("sap-dennisseah-badge"); oRm.writeClasses(); oRm.write(' style="' + oControl._style() + '">'); oRm.write('<div class="sap-dennisseah-badge-text" style="width:' + oControl._width(-40) + '">' + oControl.getText() + '</div>'); oRm.write('<div class="sap-dennisseah-badge-num">' + oControl.getValue() + '</div>'); oRm.write("</div>"); }, onAfterRendering: function() { var that = this; this.$().click(function(e) { that.firePressed({text: that.getText(), value: that.getValue()}); }) } });
And here is how they can be created
var b1 = new sap.dennisseah.Badge({ text: 'Inbox', value:100, color: 'orange', pressed: function(e) { alert('inbox pressed'); }}); b1.placeAt('content');
Here is an working example.
-D