Web.View.Layout

Documentation

layout :: Mod -> View c () -> View c ()

We can intuitively create layouts with combindations of row, col, 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

root :: Mod

As layout but as a Mod

holygrail = col root $ do
  ...

col :: Mod -> View c () -> View c ()

Lay out children in a column.

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

row :: Mod -> View c () -> View c ()

Lay out children in a row

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

grow :: Mod

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

row id $ do
 el grow none
 el_ "Right"

space :: View c ()

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

collapse :: Mod

Allow items to become smaller than their contents. This is not the opposite of grow!

scroll :: Mod

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

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

nav :: Mod -> View c () -> View c ()

A Nav element