arowM/elm-neat-layout/3.0.0

NOTE: the latest version is 4.0.5

Neat.View

Module for building View.

Core

type alias View gap msg =
View gap msg

A gap-sensible Html msg alternative.

map : (a -> b) -> View gap a -> View gap b

WAI-ARIA

setRole : String -> View g msg -> View g msg

Set "role" value for WAI-ARIA.

setAria : String -> String -> View g msg -> View g msg

Set "aria-*" value for WAI-ARIA.

e.g., setAria "required" "true" stands for "aria-required" is "true".

setBoolAria : String -> Bool -> View g msg -> View g msg

Set boolean "aria-*" value for WAI-ARIA.

i.e.,

  • setBoolAria name True is equal to setAria name "true"
  • setBoolAria name False is equal to setAria name "false"

Row

row : Row -> List (RowItem gap msg) -> View gap msg

Align children horizontally.

Config

type alias Row =
Row

Default setting for rows.

  • horizontal alignment: left
  • wrapping: disabled
enableWrap : Row -> Row
type alias RowItem gap msg =
RowItem gap msg
alignCenter : Row -> Row
alignRight : Row -> Row

Item

Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.

rowItem : String -> View gap msg -> RowItem gap msg

Row item with stretched height.

topItem : String -> View gap msg -> RowItem gap msg

Top-aligned item.

middleItem : String -> View gap msg -> RowItem gap msg

Vertically centered item.

bottomItem : String -> View gap msg -> RowItem gap msg

Bottom-aligned item.

grownRowItem : String -> View gap msg -> RowItem gap msg

Row item with stretched height and width.

grownTopItem : String -> View gap msg -> RowItem gap msg

Top-aligned item which grows its width as much as possible.

grownMiddleItem : String -> View gap msg -> RowItem gap msg

Vertically centered item which grows its width as much as possible.

grownBottomItem : String -> View gap msg -> RowItem gap msg

Bottom-aligned item which grows its width as much as possible.

Column

column : Column -> List (ColumnItem gap msg) -> View gap msg

Align children vertically.

Config

type alias Column =
Column
defaultColumn : Column

Default setting for columns.

  • vertical alignment: top
type alias ColumnItem gap msg =
ColumnItem gap msg
alignMiddle : Column -> Column
alignBottom : Column -> Column

Item

Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.

columnItem : String -> View gap msg -> ColumnItem gap msg

Column item with stretched width.

leftItem : String -> View gap msg -> ColumnItem gap msg

Left-aligned item.

centerItem : String -> View gap msg -> ColumnItem gap msg

Horizontally centered item.

rightItem : String -> View gap msg -> ColumnItem gap msg

Right-aligned item.

grownColumnItem : String -> View gap msg -> ColumnItem gap msg

Column item with stretched width and height.

grownLeftItem : String -> View gap msg -> ColumnItem gap msg

Left-aligned item which grows its height as much as possible.

grownCenterItem : String -> View gap msg -> ColumnItem gap msg

Horizontally centered item which grows its height as much as possible.

grownRightItem : String -> View gap msg -> ColumnItem gap msg

Right-aligned item which grows its height as much as possible.

Handle Conditions

none : View g a

Generates no HTML nodes. This is useful for handling elements which only appears under certain conditions.

when p v =
    if p then
        v


    else
        none
when : Bool -> View gap msg -> View gap msg

Insert a view only when a condition is met.

unless : Bool -> View gap msg -> View gap msg

Insert a view unless a condition is met.

withMaybe : Maybe a -> (a -> View gap msg) -> View gap msg

Insert a view only if the given value is Just.

Convert to Boundary

setBoundary : View gap msg -> Boundary msg

Wrap a view with boundary without gap. This is the only way to reset view gaps.

Lower level functions for HTML

setNodeName : String -> View gap msg -> View gap msg