JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("dataset");
var app = new sap.m.App({initialPage:"idSample1"});
var page = sap.ui.view({id:"idSample1", viewName:"dataset.Sample", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
JavaScript
var odata = {
firstName:"SAP",
lastName:"SCN",
functionUsed :"IconTabFilter",
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({metadata:odata});
var oTab = new sap.m.IconTabBar({
expandable: false,
items: [
new sap.m.IconTabFilter({
key : "purchase",
icon : "sap-icon://sales-order",
iconColor:"Critical",
enable:"false",
content : [
new sap.m.Label({text:"{firstName}"}),
new sap.m.Label({text:"{lastName}"}),
]
}),
new sap.m.IconTabFilter({
key : "purchase",
icon : "sap-icon://sales-order",
content : [
new sap.m.Label({text:"{functionUsed}"}),
]
}),
]
});
oTab.setModel(oModel);
oTab.bindElement("/metadata");
var p1 = new sap.m.Panel({headerText: "Demo", content: [oTab]});
var opage = new sap.m.List({
items: [
new sap.m.CustomListItem({
content: [
p1
]
})
]
});
opage.placeAt("content");