css - Elm 风格-动感风格元素

Question

我使用 Elm style-elements 编写了一个小仪表板。现在我想根据模型属性确定一个样式属性 ( Color.background )，但我不知道如何做到这一点(如果可能的话)。

我写了一个small sample app用艾莉来展示我想要实现的目标。下面是包含相关详细信息的屏幕截图。

在第 48 行，我定义了一个带有背景颜色的样式。 红色组件不应该被硬编码，而应该来自模型。模型本身只是一个表示红色量的 Int。

这可以做到吗？如果可以，怎么做？

Answer 1

当然，只需将模型传递给 stylesheet 函数即可:

stylesheet : Model -> StyleSheet MyStyles variation
stylesheet model =
    Style.styleSheet
        [ Style.style PageStyle []
        , Style.style EltStyle [ Color.background (rgba model.red 128 128 255) ]
        , Style.style FieldStyle [ Color.border grey, Border.all 1 ]
        ]

您可以像这样传递模型:

view : Model -> Html Msg
view model =
    Element.layout (stylesheet model) <|
        ...