Svelte-Splitpane demo

https://github.com/orefalo/svelte-splitpanes

Features

  • Size is less than 4 kb
  • Support both dynamic horizontal and vertical splits
  • Support defaults, min and max sizes
  • Support multiple splits
  • Support lifecyle events
  • Support custom divider size or overlay
  • Support splitter pane pushing
  • Support RTL rendering with auto-detection
  • Support first splitter on/off
  • Support pane toggle
  • Support edge snapping
  • Support programmatic resizing
  • Support programmatic splitter add/remove
  • Support for legacy browser such as IE 11
  • Support for touch devices
  • Sveltekit & Typescript friendly
To see how this library handles automatically left-to-right(LTR) and right-to-left(RTL) text direction, you may toggle the following button:

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%
2
3
I have a max height of 70%

Default pane size

Provide dimension of your panes when they first load (will be used for the width or height respectively for the vertical or horizontal layout).
If you provide a default size, make sure you provide it for all the panes for a total equals to 100%. If a pane is missing a default size, then all the panes will have the same size.
Note that setting a default value is different than setting a min or max value.

1
2
3

Locking layout by prevent pushing other panes

1
2
3
4
5

Lots of splitters & push other panes - all panes have a min width of 5%

1
2
3
4
5
6
7
8

Adding splitters programmatically

1
2
3

Change orientation & first splitter

When changing direction, all the panes current width or height will flip to adapt to the new layout.

Showing the first splitter is an option which allows user to double click the splitter to maximize the next pane.
The first splitter does not allow to resize the next pane.

1
2
3

Programmatic resizing

This example shows the programmatic way of resizing panes with data biding. And how it works both ways.

50
50%
50%

Toggle a pane on/off

1
2
3

Listening to emitted events

Here is the list of events that are emitted from splitpanes:

  • ready has no parameter and fires when splitpanes is ready
  • resize fires while resizing (on mousemove/touchmove) and returns an array of all the panes objects with their dimensions
  • resized fires once when the resizing stops after user drag (on mouseup/touchend). it returns an array of all the panes objects with their dimensions. The event also fires after adding or removing a pane.
  • pane-click returns the clicked pane object with its dimensions.
  • pane-maximize returns the maximized pane object with its dimensions.
  • pane-add returns an object containing the index of the added pane and the new array of panes after resize.
  • pane-remove returns an object containing the removed pane and an array of all the remaining panes objects with their dimensions after resize.
  • splitter-click returns the next pane object (with its dimensions) directly after the clicked splitter. This event is only emitted if dragging did not occur between mousedown and mouseup.
1
2
3

Try resizing panes and check the logs bellow.


Simple snap

Using snapSize on a pane makes it snap to his adjacent splitters and borders.

I have a snap size of 10%

Middle snap

I have a snap size of 10%

Min & max with snap

You can also snap to the panel maximum and minimum size.

I have a snap size of 10%
I have a min size of 10%
I have a max size of 70%

Styling Splitters

Styling splitters is fully customizable using CSS (or SCSS), the `theme` property is used to select the proper styling class and apply it to the SpliPanes component.
The default style is called `default-theme`, its SCSS definition can be found below:

By altering the above styles, it is possible to achieve neat visual adjustments. Please note how each Splitpanes references our new `theme="my-theme"`

1
2
3

In this example the splitters are thin lines but the reactive touch zone is spread to 30 pixels all around!


Styling Splitters - Modern

This examples brings few new concepts over the previous one, however it tries to formalize how CSS styling could be applied to panes in order to achieve the desired layout.

MenuBar

ToolBar

Folder
Try those -->

Views

Details

statusbar