This page describes components in live-web-view used to manage the layout of a page.
The CenterLayout component centers it's content both vertically and horizontally.
Centered text.
import live-web.dom
import live-web-view.layoutstatic any[] use = [CenterLayout]CenterLayout{
P`Centered text.`
}ColLayout is used to split it's content into two columns. The content automatically collapses on md breakpoint.
Left column content.
Right column content.
import live-web.dom
import live-web-view.layoutstatic any[] use = [ColLayout]ColLayout{
Col{
Content{
P`Left column content.`
}
}
Col{
Content{
P`Right column content.`
}
}
}ColLayout breakpoint can be configured to none/sm/md/lg using the breakPoint property. The following example breaks the layout at lg screen size:
Left column content.
Right column content.
import live-web.dom
import live-web-view.layoutstatic any[] use = [ColLayout]ColLayout{
Col{
Content{
P`Left column content.`
}
}
Col{
Content{
P`Right column content.`
}
}
}Float positions it's content inside it's relative parent in a corner. The content is positioned as absolute and doesn't interfere with the current layout. The position property is used to control the location of the content:
Top Left
import live-web.dom
import live-web-view.layoutstatic any[] use = [Float]Float{ position: 'TL'
P`Top Left`
}Bottom Right
import live-web.dom
import live-web-view.layoutstatic any[] use = [Float]Float{ position: 'BR'
P`Bottom Right`
}