Unknown Resizable Modern Split View In JavaScript | Split.js

1. Install and import the Split.js.

# Yarn
$ yarn add split.js

# NPM
$ npm i split.js

# CSS Grid Verison

# Yarn
$ yarn add split-grid

# NPM
$ npm i split-grid

// standard
import Split from 'split.js'

// for CSS Grid
import Split from 'split-grid'

2. Or Import the Split.js from CDN.

// standard
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>

// for CSS Grid
<script src="https://unpkg.com/split-grid/dist/split-grid.js"></script>

3. Add panes to the split view.

<div>
  <div class="split" id="one"></div>
  <div class="split" id="two"></div>
  <div class="split" id="three"></div>
</div>

4. Initialize the Spilt.js to generate a primary split view.

// Standard
Split(['#one', '#two', '#three'], {
  // options here
});

// Split Grid
Split({
  columnGutters: [{
    track: 1,
    element: document.querySelector('.column-1'),
  }, {
    track: 3,
    element: document.querySelector('.column-3'),
  }],
  rowGutters: [{
    track: 1,
    element: document.querySelector('.row-1'),
  }]
})

5. Style the split view & slider handler.

.split, .gutter.gutter-horizontal {
  float: left;
}

.gutter.gutter-horizontal {
  cursor: ew-resize;
}

6. Possible choices for split.js.

Split(['#one', '#two', '#three'], {

  // initial size in percents or CSS values.
  sizes: '',

  // minimum size (Number or Array)
  minSize: 100,

  // grow initial size to minSize
  expandToMin: false,

  // gutter size
  gutterSize: 10,

  // gutter alignment
  gutterAlign: 'center',

  // snap to minimum size offset in pixels
  snapOffset: 30,

  // number of pixels to drag
  dragInterval: 1,

  // or 'vertical'
  direction: 'horizontal',

  // cursor style
  cursor: 'col-resize',

  // functions & callbacks
  gutter: null,
  elementStyle: null,
  gutterStyle: null,
  onDrag: null,
  onDragStart: null,
  onDragEnd: null,
  
});

7. Possible choices for the split grid.

Split({

// Element is the element in the grid to enable as a draggable gutter.
// Track is the grid track the gutter element is positioned on. These must match.
columnGutters: [{
element: HTMLElement,
track: number
}],

// Element is the element in the grid to enable as a draggable gutter.
// Track is the grid track the gutter element is positioned on. These must match.
rowGutters: [{
element: HTMLElement,
track: number
}],

// Minimum size in pixels for all tracks
minSize: 0,
columnMinSize: 0,
rowMinSize: 0,

// An object keyed by track index, with values set to the minimum size in pixels for the track at that index.
// Allows individual minSizes to be specified by track.
columnMinSizes: {[track: number]: number },

// An object keyed by track index, with values set to the minimum size in pixels for the track at that index.
// Allows individual minSizes to be specified by track.
rowMinSizes: { [track: number]: number },

// Snap to minimum size at this offset in pixels.
snapOffset: 30,
columnSnapOffset: 30,
rowSnapOffset: 30,

// Drag this number of pixels at a time.
dragInterval: 1,
columnDragInterval: 1,
rowDragInterval: 1,

// Cursor style
cursor: 'col-resize',
columnCursor: 'col-resize',
rowCursor: 'col-resize',

// Called continously on drag.
onDrag: (direction: 'row' | 'column', track: number, gridTemplateStyle: string) => void,

// Called on drag start.
onDragStart: (direction: 'row' | 'column', track: number) => void,

// Called on drag end.
onDragEnd: (direction: 'row' | 'column', track: number) => void,

// Called to update the CSS properties of the grid element.
writeStyle: (grid: HTMLElement, gridTemplateProp: 'grid-template-column' | 'grid-template-row', gridTemplateStyle: string) => void,

})

8. API strategies for the split grid.

// Add a draggable column gutter
split.addColumnGutter(element: HTMLElement, track: number)

// Add a draggable row gutter.
split.addRowGutter(element: HTMLElement, track: number)

// Remove a draggable column gutter
split.removeColumnGutter(track: number, immediate?: true)

// Remove a draggable row gutter
split.removeRowGutter(track: number, immediate?: true)

// Destroy
split.destroy(immediate?: true)

Modern Split View, Split Plugin/Github

See Demo And Download