Question

我想在qooxdoo小部件装饰器中设置三色渐变。相关的CSS是

    linear-gradient(rgba(255,255,255,0.2) 0,
                    rgba(255,255,255,0.8) 30px,
                    rgba(255,255,255,0.6) 100%);

我不想在此页面http://njdesktop.nagyervin.eu/

的图标中实现悬停效果

到目前为止我尝试了什么：

在我的theme.Color文件中我定义了三种颜色

 "desktop-icon-top": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.2)" : "white",
 "desktop-icon-middle": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.8)" : "white",
 "desktop-icon-end": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.6)" : "white"

但qx.ui.decoration.MLinearBackgroundGradient仅具有渐变开始和渐变结束的属性。不适合中间人。

我还尝试直接在theme.Decoration

的样式中设置它

"desktop-icon-hovered": {
            style: {
                radius: 5,
                width: 2,
                backgroundColor: "transparent",
                color: "white",
                // gradientStart: ["desktop-icon-middle", 30],
                // gradientEnd: ["desktop-icon-end", 70]
                backgroundImage: "linear-gradient(rgba(255,255,255,0.2) 0,rgba(255,255,255,0.8) 30px,rgba(255,255,255,0.6) 100%)"

            }

但这根本不会渲染渐变。

我能做到这一点的唯一方法是在代码中使用setStyle（），但这意味着我将不得不搞乱事件监听器，我不会利用装饰器机制。再加上它感觉很难看。

那么如何在Decoration.js中使用三种颜色装饰器？

Answer 1

如果您不担心与旧浏览器的向后兼容性，那么这应该有效：

Qooxdoo Playground Example

简而言之，您首先要创建一个Decorator Mixin，为您的应用代码创建一个属性，以便使用装饰器机制进行访问。

在您的应用程序代码中，您将新的Mixin包含到应用程序的装饰器类中。

在您的应用上运行generate.py源。然后直接或通过装饰类和你的设置设置你的控件装饰器属性。

如何在qooxdoo小部件装饰器中设置三色渐变？

1 个答案: