Press "Enter" to skip to content

Unknown Resizable Modern Split View In JavaScript | Split.js

Split.js is an unknown 2 KB utility for splitting views (also called panes or frames). It handles weird situations so you don’t have to. This is a lightweight JavaScript vanilla library used to create resizable segmented views that support CSS, flexbox, and Grid layouts.

Split.js is CSS-driven, and it only uses JS to recalculate CSS styles when dragging. Split.js doesn’t attach any window event listeners, instead relying on CSS for layout when the window size changes. This keeps the JS load very low.

How to make use of it:

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

Official Website(nathancahill): Click Here

This superior jQuery/javascript plugin is developed by nathancahill. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *