Question

我是HTML / CSS的新手，所以这可能是一个新手问题。

我有一个列表小部件，用于显示API中节点的名称（#!/usr/bin/env python from foo import bar bar() <-- this will run the bar function defined in foo.py）以及这些节点上次报告的时间（:label）。如果节点已在最后一小时内报告，我希望文本颜色为绿色，如果它没有我希望它是红色（非常简单的逻辑）。

我一直在尝试使用:value和:status-warning来执行此操作，但这些选项不会单独更改每个值，而是会更改整个窗口小部件的文本颜色。这是我的coffeescript代码，我是从https://github.com/Shopify/dashing/issues/24得到的：

:status-danger

我是否需要为此创建自定义小部件，或者是否有内置机制来更改值的文本颜色？

Answer 1

我不打算改变coffeescript。没有必要。

不确定您是否还在为此寻找答案，但我最近成功解决了这个问题。如果您在.rb文件中设置代码，该文件将数据发送到列表，以便检查值是否已更新，然后确定并向发送的数据集添加“color”属性，然后，您可以告诉列表使用该“颜色”值来指定要查看的CSS类。然后可以使用适合'color'属性的任何颜色设置CSS类。

列表的我的仪表板（.erb）代码是相同的，因此无需更改。

在工作档案中：

<强> myList.rb

# get your label and value for the list before here.
if myValue >= 75.00
    myColor = "green"
elsif myValue <= 74.99
    myColor = "red"
else
    myColor = "white"
end

results.push({:label => myLabel, :value => myValue, :color => myColor})

send_event("myList", items: results)

所以从上面我们可以看到颜色变量与标签和值一起发送。现在我们只需要创建list.html，list.scss就可以识别它。

这里是我的list.html中的更改只有4行应该更改为下面的2（在有序列表中<ol></ol>）和无序列表（<ul></ul>）：

<强> list.html

        <span class="label"><div data-bind-class="item.color" data-bind="item.label"></div></span>
        <span class="value"><div data-bind-class="item.color" data-bind="item.value"></div></span>

data-bind-class将类绑定到item.color中的任何内容（我在我的示例中将其称为：红色，绿色或白色）

然后我们只需要告诉list.scss如何通过将这些类添加到文件的底部来处理这些类：

<强> list.scss

.white {
color: white;
}
.red {
color: #B31D2B;
}
.green {
color: green;
}

注意：CSS可以处理纯英文颜色。你提到你是css的新手所以我想这值得澄清。我使用了简单的英文颜色混合：'白色'，'绿色'和十六进制代码颜色：'＃B31D2B'。这个十六进制代码是一个深红色，我发现它在眼睛上更容易。

您现在可以使用此方法对文本进行任何操作。它不需要特别“颜色”。所以你可以将颜色改为'state'，并将一个'good'状态作为item.state传递，然后在你的scss中有一个'good'类来改变字体样式，字体大小，颜色，字体粗细。无论你真正喜欢什么：）

Dashing：根据List小部件的输入更改文本颜色

1 个答案: