更改复选框勾选颜色和图标 - sapui5

Question

我需要在UI5复选框上更改刻度线的颜色。 我查看了CSS，发现它位于::before选择器中：

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这不起作用。你有什么建议吗？ 谢谢。

编辑：这是复选框的代码：

＆＃13;

＆＃13;

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");
    }
  }
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

嗯，在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

希望这会对您有所帮助：）

Answer 2

渲染后，将新CSS类添加到CheckBox DOM。您可以使用DOM获取相应的getDomRef元素，这样就会为HTML DOM元素提供调用它的UI5元素。

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

然后，进入CheckBox的 tick div，这是使用jQuery children方法获得DOM的第一个孩子。

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

Here正在运作。

Answer 3

从UI5 1.38开始，可以将valueState分配给sap.m.CheckBox：

<CheckBox valueState="Success" />

当前，支持四种值状态/语义颜色：

来自：https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox