arowM/elm-neat-layout/1.0.0

NOTE: the latest version is 4.0.5

Neat.Layout.Column

Columns

columnWith : Column -> List (View p msg) -> View p msg
type alias Column =
{ vertical : Vertical
, horizontal : Horizontal
, wrap : Bool
, nodeName : String
}

Configuration about column alignment.

defaultColumn : Column

Default Column configuration.

{ vertical = Top
, horizontal = Left
, wrap = False
, nodeName = "div"
}
column : List (View p msg) -> View p msg

An alias for columnWith defaultColumn.

= Top
| Bottom
| VCenter
| SpaceBetween
| SpaceAround
= Left
| Right
| HCenter
| Stretch

Optimization

(x -> String)
-> (x -> Horizontal -> Html (Protected p msg))
-> Column
-> List x
-> View p msg

Optimized column.

  • First argument: identifier for each element

    • the return value must be unique among all elements
  • Second argument: apply lazyN on the resulting function of toProtected.

v1 : View p msg
v1 =
    Debug.todo "v1"

v2 : View p msg
v2 =
    Debug.todo "v2"

child : Int -> View p msg
child _ =
    Debug.todo "child"

-- Make sure to declare this top level in order to `lazy` works well.
child_ : Int -> Horizontal -> Html (Protected p msg)
child_ n =
    toProtected <| child n

v : List Int -> View p msg
v =
    optimized
        String.fromInt
        (\n -> lazy2 child_ n)
        defaultColumn
toProtected : View p a -> Horizontal -> Html (Protected p a)

This is supposed to be used in order to make Html.lazy.lazyN work. See optimized for real usage.