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

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 包含到应用程序的装饰器中 class。

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

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

How to set a three color gradient in a qooxdoo widgets decorator?

qooxdoo