The SplitLayout component divides a container into two resizable sections, separated by a draggable handlebar. Users can adjust the width of the left and right sections dynamically by dragging the handlebar.
SplitLayout with breakpoint will break the horizontal layout into a vertical layout when the screen is too small.
By default, the SplitLayout will take the height full screen, this examples sets this manually using the style property.
import live-web.dom
import live-web-view.layoutstatic any[] use = [SplitLayout]SplitLayout{ style = { height: '15rem' }
panes: [
SplitPane{
CenterLayout{
T`Left Content`
}
},
SplitPane{
CenterLayout{
T`Right Content`
}
}
]
}By setting breakPoint to false, we disable the breakpoint behavior, and keep the horizontal layout:
import live-web.dom
import live-web-view.layoutstatic any[] use = [SplitLayout]SplitLayout{ style = { height: '15rem' } breakPoint: false
panes: [
SplitPane{
CenterLayout{
T`Left Content`
}
},
SplitPane{
CenterLayout{
T`Right Content`
}
}
]
}We can also set vertical to true to set the layout to vertical always:
import live-web.dom
import live-web-view.layoutstatic any[] use = [SplitLayout]SplitLayout{ style = { height: '15rem' } vertical: true
panes: [
SplitPane{
CenterLayout{
T`Left Content`
}
},
SplitPane{
CenterLayout{
T`Right Content`
}
}
]
}