Svelte-Splitpanes

Horizontal layout, push other panes, min & max use, doubleclick

You can double click a splitter to maximize the next pane!
If you want to disable the 'double click splitter to maximize' behavior, you can add this attribute: dblClickSplitter=false.

1
I have a min height of 20% & max height of 70%

3
I have a max height of 70%

<script>
	import { Pane, Splitpanes } from 'svelte-splitpanes';
</script>

<Splitpanes horizontal={true} style="height: 400px">
	<Pane minSize={20} maxSize={70}>
		<span
			>1
			<br />
			<em class="specs">I have a min height of 20% &amp; max height of 70%</em>
		</span>
	</Pane>
	<Pane>
		<span>2</span>
	</Pane>
	<Pane maxSize={70}>
		<span
			>3
			<br />
			<em class="specs">I have a max height of 70%</em>
		</span>
	</Pane>
</Splitpanes>

previous Introduction

next Default Size