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

Question

上下文

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

目标

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

方法

style-elements 的 Element 模块公开了一个 below 函数，应该可以简化此任务。

它的类型注释和注释解释：

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

一个独立的例子：

interactive version

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:

<html>
<head>
  <style>
    /* you can style your program here */
  </style>
</head>
<body style="position:relative">
  <script>
    var app = Elm.Main.fullscreen()
    // you can use ports and stuff here
  </script>
</body>
</html>

结果：

定位的行位于位置基准下方，但仍左对齐。

菜单 1 和 菜单 2 项目应该在右边

请不要解决方法

可以简单地通过使用 moveRight or the paddingLeft functions, but they are dirty fixes and prone to error, and according to this lecture 定位应该与对齐一起工作

来解决这个问题

Answer 1

我深入mdgriffith/style-elementsv4.2.1的源码，在测试中发现了一个定位的例子

tests/Visual/Master.elm、line 302、

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

所以我尝试了同样的方法，使用带有一个 el 函数调用的列表作为定位函数的第一个参数，并将 row 调用的 return 值作为它的第三个参数。

这里 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")
                    ]
            ]

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

How to position a row or column against another component, while keeping alignment with Elm`s mdgriffith/style-elements

elm

elm-style-elements

上下文

目标

方法

结果：

请不要解决方法

这里 link 有一个交互式示例。