JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<!DOCTYPE html>
<html>

  <head>
<!--   <script src="https://openui5.hana.ondemand.com/1.102.5/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script> -->
  
<!--   <script src="https://openui5.hana.ondemand.com/1.84.24/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
   --> 
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>

  <body class="sapUiBody">
    <div id='content'></div>
  </body>

</html>

CSS

.sapMBadgeIndicator {
  position: absolute;
  left: unset !important;
  top: unset !important;
  bottom: 0 !important;
  right: 0 !important;
  padding-right: 0.0625rem !important;
  padding-bottom: 0.0625rem !important;
  height: auto !important;
}

.sapMBadgeIndicator::after,
.sapMBadgeIndicator::before {
  background-color: blue !important;
  border-color: blue !important;
  animation: none !important;
}

JavaScript

const btn = new sap.m.ToggleButton({
  icon: "sap-icon://filter",
  tooltip: "tooltip",
  pressed: {
    path: "/isFilterBarOpen",
    formatter: (isFilterBarOpen) => isFilterBarOpen
  },
  customData: [
    new sap.m.BadgeCustomData({
      key: "badge",
      value: {
        parts: ["/filterCount", "/isFilterBarOpen"],
        formatter: (filterCount,isFilterBarOpen) => {
          return isFilterBarOpen ? "" : String(filterCount);
        },
      },
/*       visible: {
        parts: ["/filterCount", "/isFilterBarOpen"],
        formatter: (filterCount, isFilterBarOpen) => {
          return filterCount ? !isFilterBarOpen && filterCount > 0 : false;
        },
      }, */
    }),
  ],
}).addStyleClass("filterBarToggleButton");

const toggle = new sap.m.Button({
  text: "filter bar",
  press: () => {
    let isFilterBarOpen = model.getProperty("/isFilterBarOpen");
    model.setProperty("/isFilterBarOpen", !isFilterBarOpen);
  }

})

const add = new sap.m.Button({
  text: "+",
  press: () => {
    let count = model.getProperty("/filterCount");
    model.setProperty("/filterCount", ++count);
  }
});
const sub = new sap.m.Button({
  text: "-",
  press: () => {
    let count = model.getProperty("/filterCount");
    model.setProperty("/filterCount", --count);
  }

});

btn.placeAt("content");
toggle.placeAt("content");
add.placeAt("content");
sub.placeAt("content");

const model = new sap.ui.model.json.JSONModel({
  isFilterBarOpen: true,
  filterCount: 1
});
btn.setModel(model);

model.setProperty("/isFilterBarOpen", false);