Documentation

We can intuitively create layouts with combinations of row, col, stack, grow, and space

Wrap main content in layout to allow the view to consume vertical screen space

holygrail :: View c ()
holygrail = layout id $ do
  row section "Top Bar"
  row grow $ do
    col section "Left Sidebar"
    col (section . grow) "Main Content"
    col section "Right Sidebar"
  row section "Bottom Bar"
  where section = border 1

As layout but as a Mod

holygrail = col root $ do
  ...

Lay out children in a column.

col grow $ do
   el_ "Top"
   space
   el_ "Bottom"

Lay out children in a row

row id $ do
   el_ "Left"
   space
   el_ "Right"

Grow to fill the available space in the parent row or col

row id $ do
 el grow none
 el_ "Right"

Space that fills the available space in the parent row or col.

row id $ do
 space
 el_ "Right"

This is equivalent to an empty element with grow

space = el grow none

Make a fixed layout by putting scroll on a child-element

document = row root $ do
  nav (width 300) "Sidebar"
  col (grow . scroll) "Main Content"

A Nav element

Stack children on top of each other. Each child has the full width. See popout

stack id $ do
  row id "Background"
  row (bg Black . opacity 0.5) "Overlay"

A popout does not

A normal layer contributes to the size of the parent

This child of a stack can pop out of the parent, covering content outside of it. Only usable inside stack

stack id $ do
  layer id $ input (value "Autocomplete Box")
  layer (popout (TRBL 50 0 0 0)) $ do
    el_ "Item 1"
    el_ "Item 2"
    el_ "Item 3"
el_ "This is covered by the menu"

Hide an element. See display

Set container to be a row. Favor row when possible

Set container to be a column. Favor col when possible

Cut off the contents of the element