HomeVertical layouts

This example is a 2-row vertical PanelGroup. Click/touch the empty space between the panels and drag to resize. Arrow keys can also be used to resize panels.

These panels use the maxSize property to prevent them from being resized larger than a maximal percentage of the overall group.

top
bottom
1 <PanelGroup direction="vertical">
2 <Panel maxSize={75}>
3 top
4 </Panel>
5 <PanelResizeHandle />
6 <Panel maxSize={75}>
7 bottom
8 </Panel>
9 </PanelGroup>