时间戳

首页 > 解决方案 > 如何在 elm 代码中添加更多 HTML 元素？

functional-programming - 如何在 elm 代码中添加更多 HTML 元素？

问题描述

我尝试实现更多的 html 元素，如 title (h1) 或 img src。我在我的代码中采用了一种 h1 方法，遗憾的是它不起作用。我在文档中找到了按钮和输入，但我并没有真正了解（也来自其他教程）如何实现其他元素。

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    ]
    [ div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

这个版本也不起作用：

view : Model -> Html Msg
view model =
  div []
    [ div [h1 [] [ text "todos" ]
    ]
    ,div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

标签： functional-programmingelm

解决方案

您的代码中有很多杂散的括号。我已经重新格式化它以产生以下内容：

view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    , div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] [] ]
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ] ]
    ]

这是您的版本和我的版本的差异。

该div函数有两个参数：属性列表和元素列表。请注意，在我上面的版本中，删除了一些导致编译失败的杂散括号。

推荐阅读