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> | |
) |