Skip to main content

Nested Groups

An example of nesting groups of panes for more complex layouts.

One
Two
Three
View Example Code

Anatomy

Here's the high-level structure of the example above:

		<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>
 
<PaneGroup direction="horizontal">
	<Pane defaultSize={50} />
	<PaneResizer />
	<Pane defaultSize={50}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={50} />
			<PaneResizer />
			<Pane defaultSize={50} />
		</PaneGroup>
	</Pane>
</PaneGroup>