如何减少 `sap.m.Button` 的外观但保留其功能？

Question

我正在使用带有图标的 sap.m.Button 来显示用户密码复杂性的状态。按钮文本显示规则，图标在 accept 和 reject 之间变化，具体取决于已满足的规则。

所以我希望按钮看起来不像按钮。因此，我将其类型设置为 "Transparent" 以删除边框。现在，只需要删除悬停效果，但是如何呢？我试过了：

.statusButton .sapMBtnDefault { 
  background-color: transparent !important;
}

但没有效果。有什么想法吗？

Answer 1

不是按钮，但如果使用 sap.ui.core.Icon，默认情况下您会获得没有悬停效果的按钮行为。

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
], async (XMLView) => {
  "use strict";

  const control = await XMLView.create({
    definition: `<mvc:View
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:core="sap.ui.core"
      core:require="{ MessageToast: 'sap/m/MessageToast' }"
      xmlns="sap.m">
      <App>
        <Page showHeader="false" class="sapUiResponsiveContentPadding">
          <HBox class="sapUiTinyMargin"
            alignItems="Center"
            renderType="Bare"
          >
            <Text id="myText" text="Some password rule" />
            <core:Icon id="myIcon"
              class="sapUiTinyMarginBegin"
              src="sap-icon://message-success"
              noTabStop="true"
              size="1.25rem"
              color="Positive"
              press="MessageToast.show('You totally clicked a Button')"
              tooltip="Passed"
            />
          </HBox>
        </Page>
      </App>
    </mvc:View>`,
    height: "100%",
  });

  control.placeAt("content");
}));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3_dark"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

这消除了创建和维护自定义 CSS 规则的需要，此外，图标在开箱即用的颜色和大小方面是高度可定制的。

如何减少 `sap.m.Button` 的外观但保留其功能？

How to reduce the look-and-feel from `sap.m.Button` but keep its functionalities?

css

sapui5