Author: | nathancahill |
---|---|
Views Total: | 5,697 views |
Official Page: | Go to website |
Last Update: | April 5, 2021 |
License: | MIT |
Preview:

Description:
Split.js is a lightweight vanilla JavaScript library used to create resizable split views that support CSS float, flexbox, and Grid layouts.
Also can be used as a React component for the mobile app.
Basic usage:
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 basic 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 options 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 options for 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 methods for 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)
Changelog:
04/05/2021
- split.js v1.6.4, react-split v2.0.10
- split-grid v1.0.10
v1.6.2 (03/11/2021)
- Package updated
- Doc uppdated