Conditional Panes - PaneForge

When conditionally rendering panes, you need to use the order prop to ensure the panes are rendered in the correct order when they are displayed.

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";
 
	let showPaneOne = true;
	let showPaneThree = true;
</script>
 
<button variant="outline" on:click={() => (showPaneOne = !showPaneOne)}>
	{showPaneOne ? "Hide" : "Show"} Pane One
</button>
<button variant="outline" on:click={() => (showPaneThree = !showPaneThree)}>
	{showPaneThree ? "Hide" : "Show"} Pane Three
</button>
 
<PaneGroup direction="horizontal">
	{#if showPaneOne}
		<Pane defaultSize={1 / 3} order={1} />
		<PaneResizer />
	{/if}
	<Pane defaultSize={1 / 3} order={2} />
	{#if showPaneThree}
		<PaneResizer />
		<Pane defaultSize={1 / 3} order={3} />
	{/if}
</PaneGroup>