Elm Language视图输入文本新行

Question

我是Elm的新手。我希望每个视图都在新行上输入文本框。

view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Address" model.address Address
, viewInput "text" "Address2" model.address2 Address2 
, viewInput "text" "City" model.city City
, viewInput "text" "State" model.state State
, viewInput "text" "Zipcode" model.zipcode Zipcode

我试过使用break标签，但似乎无法理解，错误消息也于事无补。

谢谢

Answer 1

使用类似的break标记

view : Model -> Html Msg
view model =
div []
[ viewInput "text" "Address" model.address Address
, br [] []
, viewInput "text" "Address2" model.address2 Address2 
, br [] []
]

Answer 2

由于默认情况下input是一个内联元素，因此需要将其封装在块元素中，以便在单独的行中显示。可以使用div标签：

view : Model -> Html Msg
view model =
div []
[ div [] [ viewInput "text" "Address" model.address Address ]
, div [] [ viewInput "text" "Address2" model.address2 Address2 ]
, div [] [ viewInput "text" "City" model.city City ]
, div [] [ viewInput "text" "State" model.state State ]
, div [] [ viewInput "text" "Zipcode" model.zipcode Zipcode ]
]

或者只是将这个div标记放在viewInput实现中。

另一种选择是通过CSS进行更改。

Answer 3

您可以将viewInput更改为返回List (Html Msg)，然后将br [] []包括在返回列表中：

view : Model -> Html Msg
view model =
div []
viewInput "text" "Address" model.address Address
++ viewInput "text" "Address2" model.address2 Address2 
++ viewInput "text" "City" model.city City
++ viewInput "text" "State" model.state State
++ viewInput "text" "Zipcode" model.zipcode Zipcode
]
viewInput: ... -> List (Html Msg)
viewInput ... =
[ ...
, br [] []
]