2017-08-13 84 views
0

我想用綠色或紅色顯示一些圖標按鈕,只要沒有按下它們,就會按照您在右側兩個按鈕上看到的方式顯示問題。當按下被設置爲真如pressed="true"時,它不會執行這個技巧,因爲該按鈕被選中但未被按下。在SAPUI5上按住顯示按鈕

這裏是一個圖片,說明我的意思:

enter image description here

我想必須有一個簡單的方法來做到這一點,還是不行?一定有什麼東西我可以在按鍵設置,它顯示的按鈕如何被按下時,它會顯示

回答

2

按鈕類型屬性有一組預定義值:您可以使用「接受」綠色和「拒絕」爲紅色。請記住,顏色取決於主題。請參閱下面的代碼:

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta name="description" content="UI5 table example with local JSON model" /> 
 
\t <meta http-equiv='X-UA-Compatible' content='IE=edge' /> 
 
\t <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> 
 
\t 
 
<style> 
 
.MyAcceptButton.sapMBtn span.sapMBtnInner.sapMBtnAccept { 
 
    background-color: Gold; 
 
} 
 
    
 
.MyAcceptButton.sapMBtn:hover>.sapMBtnHoverable.sapMBtnAccept:not(.sapMBtnActive) { 
 
    background-color: GoldenRod; 
 
    } 
 
    
 
.MyAcceptButton.sapMBtn:not(.sapMBtnDisabled)>span.sapMBtnInner.sapMBtnAccept.sapMBtnActive { 
 
    background-color: Orange; 
 
    } 
 
</style> 
 
     
 
     <title>UI5 Button Example</title> 
 
\t 
 
\t \t <script id='sap-ui-bootstrap' type='text/javascript' 
 
\t \t src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t data-sap-ui-theme='sap_bluecrystal' 
 
\t \t data-sap-ui-libs='sap.m,sap.ui.core'></script> 
 

 
\t \t <script> 
 
      
 
      var oHBox = new sap.m.HBox({ width: "100%" }); 
 
      
 
      // Create Button with specific color scheme via custom style 
 
      // Gold color for normal background 
 
      // GoldenRod for background when mouse hovering 
 
      // Ornage for a pressed button 
 
      
 
      var oAcceptButton = new sap.m.Button({ icon: "sap-icon://history", type: "Accept" }); 
 
      oAcceptButton.addStyleClass("MyAcceptButton"); 
 
      
 
      oHBox.addItem(oAcceptButton); 
 
      oHBox.addItem(new sap.m.Button({ icon: "sap-icon://history", type: "Accept"})); 
 
      oHBox.addItem(new sap.m.Button({ icon: "sap-icon://history", type: "Reject"})); 
 
      
 
      oHBox.placeAt("content"); 
 
\t \t </script> 
 
\t </head> 
 
\t <body class="sapUiBody" id="content"> 
 
\t </body> 
 
</html>

還有一個切換按鈕,看到here。它也有類型屬性,所以你可以改變它的顏色。

+0

好的,有沒有一種方法,我可以使用只爲那些2-3按鈕不同的主題?因爲在其他網頁上我使用sap-belize主題,看起來更好 – Nali

+0

您可以在一個單獨的css文件中定義自己的css類,並通過** class **屬性將此類添加到按鈕中。 – slkorolev

+0

你能提供一個例子嗎?對我來說會很好 – Nali