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

时间:2016-09-28 12:33:19

标签: css checkbox sapui5

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

enter image description here

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



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




3 个答案:

答案 0 :(得分:2)

嗯,在UI5中有一些预定义的复选框,其中显示颜色根据ValueState进行更改。

<强>输出: -

enter image description here

<强>代码 -

// 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

希望这会对您有所帮助:)

答案 1 :(得分: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正在运作。

答案 2 :(得分:0)

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

<CheckBox valueState="Success" />

当前,支持四种值状态/语义颜色:

enter image description here

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