Question

我尝试实现其他HTML元素，例如标题（h1）或img src。我在我的代码中采用了一种方法，但不幸的是它无法正常工作。我在文档中找到了按钮和输入，但是我并没有从其他教程中真正了解如何实现其他元素。

-- 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" ]
    ]
    ]

Answer 1

您的代码中有很多流浪括号。我将其重新格式化以产生以下内容：

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" ] ]
    ]

Here is a diff您的版本和我的版本。

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

如何在Elm代码中添加更多HTML元素？

1 个答案: