центральные элементы elm-ui в завернутом ряду - PullRequest
Новая
       44

центральные элементы elm-ui в завернутом ряду

2 голосов
/ 17 января 2020

Я использую Elm с mdgriffiths / elm-ui, и мне действительно это нравится. Прямо сейчас я пытаюсь создать центрированный, обернутый ряд элементов:

enter image description here

Я могу получить это к этому пункту:

enter image description here

с использованием этого кода: 

button : String -> String -> Element Msg
button label url =
    link
        [ height (px 150)
        , width (px 150)
        , Border.width 1
        , Background.color (rgb255 255 255 255)
        ]
        { url = url
        , label =
            Element.paragraph
                [ Font.center ]
                [ textEl [] label ]
        }


row : Element Msg
row =
    Element.wrappedRow
        [ Element.spacing 25
        , Element.centerX
        , Element.centerY
        , width (fill |> Element.maximum 600)
        , Font.center
        ]
        [ button "A" "/a"
        , button "B" "/b"
        , button "C" "/c"
        , button "D" "/d"
        ]

Но когда я пытаюсь добавить Element.centerX к своим кнопкам, как это 

link
    [ Element.centerX
    , ...
    ]

Вместо этого я получаю:

enter image description here

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

Я не уверен, что мне не хватает того, что я должен использовать, или все это требует перестановки, или мне просто нужно использовать встроенный CSS материал.

Обновление:

Ссылка на Ell ie с проблемами, с которыми я сталкиваюсь.

https://ellie-app.com/7NpM6SPfhLHa1

1 Ответ

1 голос
/ 19 января 2020

Эта проблема Github полезна для этой проблемы. Боюсь, вам придется использовать немного CSS (если я что-то упустил). Я нашел это раньше с elm-ui; время от времени он не может делать то, что вы хотите, и вам нужно немного CSS.

Это работает для меня (взято из поста AlienKevin в ссылке выше). Вам нужно установить «marginLeft» и «marginRight» в «auto». 

module Main exposing (main)

import Element as E
import Element.Border
import Html.Attributes


box : String -> E.Element msg
box label =
    E.paragraph
        [ E.width <| E.px 200
        , Element.Border.width 1
        , E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
        , E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
        ]
        [ E.text label ]


row : E.Element msg
row =
    E.wrappedRow []
        [ box "A"
        , box "B"
        , box "C"
        ]


main =
    E.layout [] row

(см. здесь для Ell ie.)

...