2017-08-13 123 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