我在设置复选框和单选按钮时出现问题,当页面首次启动时,复选框和单选按钮图标周围会出现白色区域,但是当我更改选择时,它看起来很正常!
这是 Appearance.js :
中单选按钮的代码"radiobutton" :
{
alias : "atom",
style : function(states)
{
var icon = (states.checked) ? icon = "decoration/form/checked-radio.png" : "qx/static/blank.gif";
return {
icon: icon,
gap : 8
};
}
},
"radiobutton/icon" : {
style : function(states)
{
var decorator;
if (states.disabled) {
decorator = "radiobutton-disabled";
} else if (states.checked) {
decorator = "radiobutton-checked";
} else if (states.hovered) {
decorator = "radiobutton-hovered";
} else {
decorator = "radiobutton";
}
decorator += states.invalid && !states.disabled ? "-invalid" : "";
return {
decorator : decorator,
width: 16,
height: 16
};
}
},
这是 Decoration.js 中的radiobutton decotraor:
"radiobutton" : {
style : {
width: 1,
innerWidth : 1,
radius: 8,
gradientStart: ["radiobutton-start", 0],
gradientEnd: ["radiobutton-end", 50],
color: "radiobutton-border",
innerColor : "radiobutton-inner-sides",
colorBottom: "radiobutton-border-bottom",
innerColorTop: "radiobutton-inner",
innerWidthBottom: 0,
shadowColor: "reflection",
shadowLength: 1,
shadowHorizontalLength: 0,
shadowBlurRadius: 0
}
},
"radiobutton-hovered" : {
include : "radiobutton",
style : {
gradientStart: ["radiobutton-end-hovered", 0],
gradientEnd: ["radiobutton-start", 100],
color: "radiobutton-border",
colorBottom: "radiobutton-border-bottom-hovered",
innerWidth : 0,
shadowLength: 0
}
},
"radiobutton-focused" : {
include : "radiobutton",
style : {
gradientStart: ["radiobutton-start-focused", 0],
gradientEnd: ["radiobutton-end-focused", 100],
color: "radiobutton-border-sides-focused",
innerColor : "radiobutton-inner-sides-focused",
colorBottom: "radiobutton-border-bottom-focused",
colorTop: "radiobutton-border-focused",
innerColorBottom: "radiobutton-inner-bottom-focused",
innerColorTop: "radiobutton-inner-focused"
}
},
我使用PNG
图片作为图标,我做错了什么以及如何解决?
修改
当我使用纯色作为图标背景而不是渐变问题得到解决时,原子小部件中不支持渐变吗?