变化选择框打勾颜色和图标 - sapui5

Question

我需要改变刻度的颜色上UI5复选框。我已经看过了CSS，并发现这是在::before选择：

我在CSS文件中添加了一个类的复选框，称为.accept和定义如下：

.accept.sapMCbBg.sapMCbMarkChecked::before{
    content: "\e05b";
    font-family: "SAP-icons";
    color: #00a600;
}

这是行不通的。你有什么建议吗？谢谢。

编辑：下面是复选框的代码：

var oCheckBox = new sap.m.CheckBox({
  text: "test",
  selected: false,
  select: function(oEvent){
    if (oEvent.getSource().getSelected() == true){
      oEvent.getSource().addStyleClass("accept");
    }else{
      oEvent.getSource().removeStyleClass("accept");
    }
  }
});

Answer 1

添加新的CSS类CheckBox DOM一旦呈现。你可以得到相应的DOM元素getDomRef，它给你HTML DOM对调用它的UI5元素。

.green::before{
    color: #00a600 !important;
}

然后，进入CheckBox的刻度格是用jQuery DOM方法获得children的第一个孩子。

onAfterRendering: function() {
    var cb = this.getView().byId("cb");
    $($(cb.getDomRef()).children()[0]).addClass("green");
}

Here工作的例子。

Answer 2

嗯，有一些预定义的组复选框在UI5其中作为显示颜色基于ValueState改变中给出。

输出： -

码-

// create CheckBoxes in different states
var oLayout = new sap.ui.commons.layout.MatrixLayout("matrix1");
    oLayout.setLayoutFixed(false);
    oLayout.setColumns(4);

var oCB1 = new sap.ui.commons.CheckBox({
    text : 'error',
    tooltip : 'Select for Error',
    valueState : sap.ui.core.ValueState.Error
    });

var oCB2 = new sap.ui.commons.CheckBox({
    text : 'warning',
    tooltip : 'Select for Warning',
    valueState : sap.ui.core.ValueState.Warning
    });

var oCB3 = new sap.ui.commons.CheckBox({
    text : 'ReadOnly',
    tooltip : 'This CheckBox is read only',
    editable : false,
    checked : true
    });

var oCB4 = new sap.ui.commons.CheckBox({
    text : 'disabled',
    tooltip : 'This CheckBox is disabled',
    enabled : false
    });

oLayout.createRow(oCB1, oCB2, oCB3, oCB4);

// attach it to some element in the page
oLayout.placeAt("sample2");

值状态的选项 - https://openui5.hana.ondemand.com/#/api/sap.ui.core.ValueState

希望这将帮助你:)