榆树风格-动态风格的元素

Question

我已经使用 Elm style-elements. Now I'd like to have one style property (Color.background) 编写了一个小型仪表板，以根据模型属性进行确定，但我不知道该怎么做（如果可能的话）。

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

在第 48 行，我定义了一个带有 bg 颜色的样式。 red 组件不应硬编码，而应来自模型。模型本身只是一个 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 ]
        ]

你像这样传递 model：

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

榆树风格-动态风格的元素

Elm style-elements with dynamic style

css

elm

elm-style-elements