Skip to main content

Conditional Panes

An example of how to handle conditional panes.

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>