Question

我是Elm的新手。我希望每个viewInput文本框都换行。

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是default的内联元素，因此您需要将其包装在block元素中以将其显示在单独的行上。可以使用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 [] []
  ]

榆木语言视图输入文本换行

3 个答案: