Web.View.Layout

Documentation

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

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

root :: Mod c

As layout but as a Mod

holygrail = col root $ do
  ...

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

Lay out children in a column.

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

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

Lay out children in a row

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

grow :: Mod c

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

scroll :: Mod c

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 c -> View c () -> View c ()

A Nav element

stack :: Mod c -> Layer c () -> View c ()

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

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

newtype Layer c a

Constructors

Layer (View c a)

Instances

Applicative (Layer c)

Defined in Web.View.Layout

Methods

pure :: a -> Layer c a

(<*>) :: Layer c (a -> b) -> Layer c a -> Layer c b

liftA2 :: (a -> b -> c0) -> Layer c a -> Layer c b -> Layer c c0

(*>) :: Layer c a -> Layer c b -> Layer c b

(<*) :: Layer c a -> Layer c b -> Layer c a

Functor (Layer c)

Defined in Web.View.Layout

Methods

fmap :: (a -> b) -> Layer c a -> Layer c b

(<$) :: a -> Layer c b -> Layer c a

Monad (Layer c)

Defined in Web.View.Layout

Methods

(>>=) :: Layer c a -> (a -> Layer c b) -> Layer c b

(>>) :: Layer c a -> Layer c b -> Layer c b

return :: a -> Layer c a

layer :: Mod c -> View c () -> Layer c ()

A normal layer contributes to the size of the parent. See stack

popup :: Sides Length -> Mod c

This layer is not included in the stack size, and covers content outside of it. If used outside of stack, the popup is offset from the entire page.

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

hide :: Mod c

Hide an element. See display

flexRow :: Mod c

Set container to be a row. Favor row when possible

flexCol :: Mod c

Set container to be a column. Favor col when possible

truncate :: Mod c

Cut off the contents of the element