Nested Groups

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

One
Two
Three

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>	
MIT

© 2024 Svecosystem Team