Язык вяза viewInput текст новая строка

Question

Я новичок в Вязов. Я хотел бы, чтобы каждое текстовое поле 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

Я пытался использовать тег разрыва, но не могу понять, и сообщения об ошибках не помогают.

Спасибо

Answer 1

Поскольку 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 2

Вы можете изменить 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 [] []
  ]

Answer 3

используйте тег разрыва как это

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