write HTML like elm-ui
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 attrs =
Html.div
([ Attr.style "display" "flex"
, Attr.style "flex-direction" "column"
]
++ attrs
)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)centered : List (Attribute msg)
centered =
[ alignBaseline, alignCenter ]alignBaseline : Attribute msg
alignBaseline =
Attr.style "align-items" "baseline"alignCenter : Attribute msg
alignCenter =
Attr.style "align-items" "center"centerContent : Attribute msg
centerContent =
Attr.style "justify-content" "center"noWrap : Attribute msg
noWrap =
Attr.style "flex-wrap" "nowrap"fill : Attribute msg
fill =
fillPortion 1fillPortion : Int -> Attribute msg
fillPortion n =
Attr.style "flex" (String.fromInt n)spacing : Float -> Attribute msg
spacing n =
Attr.style "gap" (String.fromFloat n ++ "px")spaceBetween : Attribute msg
spaceBetween =
Attr.style "justify-content" "space-between"sticky : List (Attribute msg)
sticky =
[ Attr.style "position" "sticky"
, Attr.style "z-index" "99999"
]stickyOnBottom : List (Attribute msg)
stickyOnBottom =
[ Attr.style "position" "sticky"
, Attr.style "bottom" "0"
, Attr.style "z-index" "99999"
]stickyOnTop : List (Attribute msg)
stickyOnTop =
[ Attr.style "position" "sticky"
, Attr.style "top" "0"
, Attr.style "z-index" "99999"
]