qooxdoo复选框appeacance - 图标无法正常显示

时间:2013-11-11 00:11:56

标签: checkbox radio-button qooxdoo appearance

enter image description here

我在设置复选框和单选按钮时出现问题,当页面首次启动时,复选框和单选按钮图标周围会出现白色区域,但是当我更改选择时,它看起来很正常!

这是 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图片作为图标,我做错了什么以及如何解决?

修改
当我使用纯色作为图标背景而不是渐变问题得到解决时,原子小部件中不支持渐变吗?

0 个答案:

没有答案