从 javascript 对象获取 elm 的类名

问题描述

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

应该如何从 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'][]

解决方法

您应该可以使用 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,subscriptions = \_ -> Sub.none
        }

elm javascript