我需要在UI5复选框上更改刻度线的颜色。
我查看了CSS,发现它位于::before
选择器中:
我已在复选框中添加了一个类,名为.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");
}
}
});

答案 0 :(得分: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
希望这会对您有所帮助:)
答案 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" />
当前,支持四种值状态/语义颜色:
来自:https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox