从javascript对象获取elm的类名

Question

我们有一个开发团队，他们用tailwind.css创建标准的css-css，它通常用于Vue/React组件。然而，我们正在尝试为一个新项目使用elm，并希望使用js-file中的相同类，因为它们正在维护。

如何从javascript-file导入：

export const card = {
  cardSelected: 'bg-blue-50',
  cardOutline: 'f-card-outline absolute rounded-8 inset-0 transition-all border-2',

};

export const toaster = {
  toasterContainer: 'fixed fixed-ios-fix bottom-16 left-0 right-0 mx-8',
  toaster: 'f-toaster grid f-grid auto-rows-auto',
};

以便在元素上设置这些样式。例如，使用烤面包机：

div [class 'f-toaster grid f-grid auto-rows-auto'][]

Answer 1

您应该能够使用flags来实现这一点。

在你的js文件中，你可能会有：

const app = Elm.Main.init({
    node: document.getElementById('main'),
    flags: {
        card: {
            cardSelected: 'bg-blue-50',
            cardOutline: 'f-card-outline absolute rounded-8 inset-0 transition-all border-2',
        }
    }
})

你的Main.elm应该是这样的：

type alias CardValues =
    { cardSelected : String
    , cardOutline : String
    }


type alias Card =
    { card : CardValues }


type alias Model =
    { flags : Card }


main : Program Card Model Msg
main =
    Browser.element
        { init = \flags -> ( { flags = flags }, Cmd.none )
        , view =
            \model ->
                Html.div
                    [ Html.class model.flags.card.cardOutline ]
                    [ Html.h1 [] [ Html.text "Here!" ] ]
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }