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

时间:2018-11-01 02:01:49

标签: elm

我是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标签,但似乎无法弄清楚,错误消息也无济于事。

谢谢

3 个答案:

答案 0 :(得分:1)

像这样使用break标签

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

答案 1 :(得分:1)

由于inputdefault的内联元素,因此您需要将其包装在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进行更改。

答案 2 :(得分:0)

您可以将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 [] []
  ]