Как получить пробел между тегами HTML - PullRequest
Новая
       6

Как получить пробел между тегами HTML

2 голосов
/ 24 апреля 2019

Используя модуль Html от Elm, выходные данные не имеют пробелов между html-тегами.Но для встроенных отображаемых тегов пробел имеет функцию и заставляет браузер отображать пустое пространство между ними. 

div []
    [ strong [] [ text "Key:" ]
    , span [] [ text "value" ]
    , text "(extra)"
    ]

Результат: 

<div><strong>Key:</strong><span>value</span>(extra)</div>

Отображается в браузере как: Ключ: значение(дополнительно)

Желаемый результат

Требуемый HTML-код должен иметь какой-либо пробел: 

<div>
<strong>Key:</strong>
<span>value</span>
(extra)
</div>

Отображается в браузере как: Ключ: значение (дополнительное)

Ответы [ 2 ]

4 голосов
/ 24 апреля 2019

Вы можете сделать обертку для тегов Html следующим образом: 

type alias HtmlTag msg =
   List (Html.Attribute msg) -> List (Html msg) -> Html msg


interspaced : HtmlTag msg -> HtmlTag msg
interspaced fn =
   \attr content -> fn attr (content |> List.intersperse (text " "))


main : Html msg
main =
    interspaced div []
        [ strong [] [ text "Key:" ]
        , span [] [ text "value" ]
        , text "(extra)"
        ]
4 голосов
/ 24 апреля 2019

Вы можете просто поставить пробел между элементами вручную: 

div []
    [ strong [] [ text "Key:" ]
    , text " "
    , span [] [ text "value" ]
    , text " "
    , text "(extra)"
    ]

Или, если вам нужно что-то более общее, вы можете легко написать функцию для этого, используя List.intersperse, например ::

withSpacing : List (Html msg) -> List (Html msg)
withSpacing =
    List.intersperse (text " ")


main : Html msg
main =
    div []
        (withSpacing
            [ strong [] [ text "Key:" ]
            , span [] [ text "value" ]
            , text "(extra)"
            ]
        )

Или с еще большим удобством, исходя из разумного предположения, что вы будете применять его к функции, которая берет список дочерних элементов для создания одного элемента: 

withSpacing : (List (Html msg) -> Html msg) -> List (Html msg) -> Html msg
withSpacing element =
    List.intersperse (text " ") >> element


main : Html msg
main =
    withSpacing (div [])
        [ strong [] [ text "Key:" ]
        , span [] [ text "value" ]
        , text "(extra)"
        ]
...