सैप.एम.बटन से होवर प्रभाव को पूरी तरह से कैसे हटाएं

Question 1

मैं उपयोगकर्ता पासवर्ड जटिलता की स्थिति प्रदर्शित करने के लिए एक आइकन के साथ sap.m.Button का उपयोग कर रहा हूं। बटन टेक्स्ट नियम को प्रदर्शित करता है और आइकन accept और reject के बीच बदलता है जो नियम के पूरा होने पर निर्भर करता है।

तो मैं चाहता हूं कि बटन बटन की तरह न दिखे। इसलिए मैंने इसके प्रकार को "Transparent" पर सेट किया है जो सीमाओं को हटा देता है। अब, केवल होवर प्रभाव को हटाने की जरूरत है, लेकिन कैसे? मैंने कोशिश की:

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

लेकिन बिना किसी प्रभाव के। कोई विचार?

sapui5

1

AntonSack 29 नवम्बर 2018, 23:58

Answer

बटन नहीं बल्कि sap.ui.core.Icon^{API के साथ} आप डिफ़ॉल्ट रूप से होवर प्रभाव के बिना बटन व्यवहार प्राप्त करते हैं।

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/m/MessageToast",
], XMLView => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <App>
      <Page showHeader="false">
        <HBox class="sapUiTinyMargin"
          alignItems="Center"
          renderType="Bare"
        >
          <Text id="myText" text="Some password rule" />
          <core:Icon id="myIcon"
            class="sapUiTinyMarginBegin"
            src="sap-icon://accept"
            noTabStop="true"
            size="1.25rem"
            color="Positive"
            press="sap.m.MessageToast.show('You totally clicked a Button')"
            tooltip="Passed"
          />
        </HBox>
      </Page>
    </App>
  </mvc:View>`,
}).then(view => view.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_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%;"></body>

यह कस्टम सीएसएस नियम बनाने और बनाए रखने की आवश्यकता को समाप्त करता है, साथ ही, रंग और आकार के मामले में आइकन अत्यधिक अनुकूलन योग्य है।

3

Boghyon Hoffmann 30 नवम्बर 2018, 02:17

Question 2

बटन नहीं बल्कि sap.ui.core.Icon^{API के साथ} आप डिफ़ॉल्ट रूप से होवर प्रभाव के बिना बटन व्यवहार प्राप्त करते हैं।

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/m/MessageToast",
], XMLView => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <App>
      <Page showHeader="false">
        <HBox class="sapUiTinyMargin"
          alignItems="Center"
          renderType="Bare"
        >
          <Text id="myText" text="Some password rule" />
          <core:Icon id="myIcon"
            class="sapUiTinyMarginBegin"
            src="sap-icon://accept"
            noTabStop="true"
            size="1.25rem"
            color="Positive"
            press="sap.m.MessageToast.show('You totally clicked a Button')"
            tooltip="Passed"
          />
        </HBox>
      </Page>
    </App>
  </mvc:View>`,
}).then(view => view.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_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%;"></body>

यह कस्टम सीएसएस नियम बनाने और बनाए रखने की आवश्यकता को समाप्त करता है, साथ ही, रंग और आकार के मामले में आइकन अत्यधिक अनुकूलन योग्य है।

3

Boghyon Hoffmann 30 नवम्बर 2018, 02:17

सैप.एम.बटन से होवर प्रभाव को पूरी तरह से कैसे हटाएं

1 उत्तर

संबंधित सवाल

नए सवाल

sapui5