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>