elm-ui 中心元素在包裹的行中答案

【问题标题】：elm-ui center elements in wrapped rowelm-ui 中心元素在包裹的行中
【发布时间】：2020-01-17 18:56:48
【问题描述】：

我将 Elm 与 mdgriffiths/elm-ui 一起使用，我真的很喜欢它。现在，我正在尝试创建一个居中、包裹的元素行：

我可以做到这一点：

使用此代码：

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
    , ...
    ]

我得到了这个：

我也尝试了Font.center，但没有成功，我不知道我还能尝试什么。

我不确定我是否遗漏了我应该使用的东西，或者整个东西是否需要重新安排，或者我是否只需要使用内置的 CSS 东西。

更新：

链接到 Ellie 与我看到的问题。

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

【问题讨论】：

标签： elm elm-ui

【解决方案1】：

您还可以执行以下操作：

定义以下 elm-ui 类。我通常为此设置一个 UI.elm 模块

centerWrap : Attribute msg
centerWrap =
    Html.Attributes.class "centerWrap"
        |> htmlAttribute


dontCenterWrap : Attribute msg
dontCenterWrap =
    Html.Attributes.class "dontCenterWrap"
        |> htmlAttribute

将以下内容添加到您的 CSS。如果有 centerWrap 类但没有 dontCenterWrap 类，则基本上说中心元素。

:not(.dontCenterWrap).centerWrap>div.wrp {
    justify-content: center !important;
}

应用属性

    wrappedRow [ width fill, UI.centerWrap, spaceEvenly ] [...]

假设您创建了一个 centerWraps 的自定义元素并希望禁用它，您可以使用 UI.dontCenterWrap

centerWrappedRow attr children =
    wrappedRow (UI.centerWrap :: attr) children

-- somewhere else
...
    centerWrappedRow [UI.dontCenterWrap] [..]
...

【讨论】：

【解决方案2】：

这个Github issue 对这个问题很有用。恐怕你将不得不使用一些 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

（有关 Ellie，请参阅 here。）

【讨论】：