Get Started
Create a split view with an array of selectors or HTML elements. By default, Split.js modifies the CSS width property and nothing else. You are responsible for adding other CSS properties to create a layout. A simple way to place elements side-by-side is with afloat rule. Other layout options besides width-float are possible (and encouraged), see the Advanced section below.
JS
| Split(['#one', '#two']); |
HTML
| <div> | |
| <div class="split" id="one"></div> | |
| <div class="split" id="two"></div> | |
| </div> |
CSS
| .split, .gutter.gutter-horizontal { | |
| float: left; | |
| } | |
| .gutter.gutter-horizontal { | |
| cursor: ew-resize; | |
| } |
Advanced
By overriding the defaultelementStyle and gutterStyle hooks, it's easy to change the CSS rules that Split.js modifies to support flex, grid and other CSS layouts:
JS
| Split(['#one', '#two'], { | |
| elementStyle: (dimension, size, gutterSize) => ({ | |
| 'flex-basis': `calc(${size}% - ${gutterSize}px)`, | |
| }), | |
| gutterStyle: (dimension, gutterSize) => ({ | |
| 'flex-basis': `${gutterSize}px`, | |
| }), | |
| }) |
HTML
| <div class="flex"> | |
| <div id="one"></div> | |
| <div id="two"></div> | |
| </div> |
CSS
| .flex { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| .gutter.gutter-horizontal { | |
| cursor: ew-resize; | |
| } |
React
Split.js is also available as a React component: react-split. The component accepts the same options as the Split.js constructor:JS
| import Split from 'react-split' | |
| ReactDOM.render( | |
| <Split sizes={[25, 75]}> | |
| <Component /> | |
| <Component /> | |
| </Split> | |
| ) |