如何将行或列放在另一个组件上，同时保持与Elm的mdgriffith / style-elements对齐

Question

上下文

我使用Elm和mdgriffith/style-elements v4.2.1来为网页创建布局和样式。

目标

我试图在另一行下面放置一个右对齐的行。

方法

Element的{​​{1}}模块公开了一个below函数，该函数可以简化此任务。

其类型注释，注释为注释：

style-elements

一个自包含的例子：

interactive version

below : List (Element style variation msg) -- List of components what you want position below the pivot element -> Element style variation msg -- pivot component -> Element style variation msg -- Returned component

Main.elm

module Main exposing (main) import Color exposing (rgb) import Element exposing (..) import Element.Attributes exposing (..) import Html exposing (Html) import Style exposing (..) import Style.Border as Border import Style.Color as Color import Style.Font as Font type Styles = None | Title | Menu stylesheet = Style.styleSheet [ style None [] , style Title [ Color.background (rgb 0 0 0) , Color.text <| rgb 255 255 255 ] , style Menu [ Border.all 3 , Color.background <| rgb 255 255 255 , Color.border <| rgb 0 0 0 , Color.text <| rgb 0 0 0 ] ] main : Html msg main = layout stylesheet <| column None [] <| [ row Title [ center , verticalCenter , padding 30 ] [ text "Title" ] |> below [ row Menu [ alignRight , moveUp 15 , spacing 20 ] [ el None [] (text "menu 1") , el None [] (text "menu 2") ] ] , row None [ spread, padding 50 ] [ el None [] (text "info 1") , el None [] (text "info 2") ] ]

index.html:

结果：

定位的行位于枢轴位置下方，但仍保持左对齐。

菜单1 和菜单2 项目应位于右侧

请不要解决方法

只需使用moveRight或paddingLeft函数就可以解决此问题，但它们是脏修补程序并且容易出错，并且根据此lecture定位应该可以同时运行对齐

Answer 1

我达到了mdgriffith/style-elements v4.2.1的源代码，并在测试中找到了一个定位示例。

tests/Visual/Master.elm，line 302，

它将多个el调用的返回值传递给列表中的定位函数，并在其中应用对齐。

所以我尝试使用带有el函数调用的列表作为定位函数的第一个参数，并将row调用的返回值作为第三个参数传递。

在此link处有一个互动示例。

以下是相关摘录：

    [ row
        Title
        [ center
        , verticalCenter
        , padding 30
        ]
        [ text "Title" ]
        |> below
            [ el Menu [ alignRight, moveUp 15 ] <| -- Call el and pass the return value of row to it as its 3-rd argument.
                row None
                    [ spacingXY 30 0, paddingRight 20 ]
                    [ el None [] (text "menu 1")
                    , el None [] (text "menu 2")
                    ]
            ]