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

Question

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

我有一个列表小部件，我用它来显示来自 API 的节点名称 (:label) 以及这些节点最后一次报告的时间 (:value)。如果节点在过去一小时内报告过，我希望文本颜色为绿色，如果没有，我希望它为红色（非常简单的逻辑）。

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

ready: ->
    if @get('unordered')
        $(@node).find('ol').remove()
    else
        $(@node).find('ul').remove()

onData: (data) ->
    #clear existing "status-*" classes
    $(@get('node')).attr 'class', (i,c) ->
        c=c.replace /\bstatus-\S+/g, ''
    # add new class
    $(@get('node')).addClass "status-#{x.status}"

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

Answer 1

我不会费心去更改 coffeescript。没必要。

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

我的列表仪表板 (.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>

数据绑定-class 将 class 绑定到 item.color 中的任何内容（我知道在我的示例中将是：红色、绿色或白色）

然后我们只需要告诉 list.scss 如何处理这些 classes，方法是将其添加到文件底部：

list.scss

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

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

您现在可以使用此方法对文本做任何事情。它不需要特别是 'color'。因此，您可以将颜色更改为 'state' 并让 'good' 状态作为 item.state 传递，然后在您的 scss 中有一个 'good' class更改字体样式、字体大小、颜色、字体粗细。随心所欲:)

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

Dashing: Changing text color based on input to List widget

dashing