从 javascript 对象获取 elm 的类名
Getting classnames for elm from a javascript object
我们有一个开发人员团队,他们使用通常用于 Vue/React 组件的 tailwind.css 创建标准 css-类。但是,我们正在尝试将 elm 用于一个新项目,并且希望在 js 文件中使用相同的 类,因为它们正在维护中。
如何从 javascript-文件导入:
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, Cmd.none )
, subscriptions = \_ -> Sub.none
}
我们有一个开发人员团队,他们使用通常用于 Vue/React 组件的 tailwind.css 创建标准 css-类。但是,我们正在尝试将 elm 用于一个新项目,并且希望在 js 文件中使用相同的 类,因为它们正在维护中。
如何从 javascript-文件导入:
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, Cmd.none )
, subscriptions = \_ -> Sub.none
}