Orasund/elm-layout/1.0.0

NOTE: the latest version is 3.0.0

Layout

write HTML like elm-ui

Html container

none : Html msg
none : Html msg
none =
    Html.text ""
el : List (Attribute msg) -> Html msg -> Html msg
el : List (Attribute msg) -> Html msg -> Html msg
el attrs content =
    Html.div
        (Attr.style "display" "flex"
            :: attrs
        )
        [ content ]
column : List (Attribute msg) -> List (Html msg) -> Html msg
column : List (Attribute msg) -> List (Html msg) -> Html msg
column attrs =
    Html.div
        ([ Attr.style "display" "flex"
         , Attr.style "flex-direction" "column"
         ]
            ++ attrs
        )
row : List (Attribute msg) -> List (Html msg) -> Html msg
row : List (Attribute msg) -> List (Html msg) -> Html msg
row attrs =
    Html.div
        ([ Attr.style "display" "flex"
         , Attr.style "flex-direction" "row"
         , Attr.style "flex-wrap" "wrap"
         ]
            ++ attrs
        )

Will wrap into the next line if there is not enough space.

If you don't want this behavior, you can just add noWrap:

unwrappedRow : List (Attribute msg) -> List (Html msg) -> Html msg
unwrappedRow attrs =
    Layout.row ([ Layout.noWrap ] ++ attrs)

Attributes

centered : List (Attribute msg)
centered : List (Attribute msg)
centered =
    [ alignBaseline, alignCenter ]
alignBaseline : Attribute msg
alignBaseline : Attribute msg
alignBaseline =
    Attr.style "align-items" "baseline"
alignCenter : Attribute msg
alignCenter : Attribute msg
alignCenter =
    Attr.style "align-items" "center"
centerContent : Attribute msg
centerContent : Attribute msg
centerContent =
    Attr.style "justify-content" "center"
noWrap : Attribute msg
noWrap : Attribute msg
noWrap =
    Attr.style "flex-wrap" "nowrap"

Size

fill : Attribute msg
fill : Attribute msg
fill =
    fillPortion 1
fillPortion : Int -> Attribute msg
fillPortion : Int -> Attribute msg
fillPortion n =
    Attr.style "flex" (String.fromInt n)

Spacing

spacing : Float -> Attribute msg
spacing : Float -> Attribute msg
spacing n =
    Attr.style "gap" (String.fromFloat n ++ "px")
spaceBetween : Attribute msg
spaceBetween : Attribute msg
spaceBetween =
    Attr.style "justify-content" "space-between"

Sticky

sticky : List (Attribute msg)
sticky : List (Attribute msg)
sticky =
    [ Attr.style "position" "sticky"
    , Attr.style "z-index" "99999"
    ]
stickyOnBottom : List (Attribute msg)
stickyOnBottom : List (Attribute msg)
stickyOnBottom =
    [ Attr.style "position" "sticky"
    , Attr.style "bottom" "0"
    , Attr.style "z-index" "99999"
    ]
stickyOnTop : List (Attribute msg)
stickyOnTop : List (Attribute msg)
stickyOnTop =
    [ Attr.style "position" "sticky"
    , Attr.style "top" "0"
    , Attr.style "z-index" "99999"
    ]