Modern Split View In JavaScript – Split.js

Category: Javascript , Layout , Recommended | February 19, 2019
Author: nathancahill
Views Total: 2,227 views
Official Page: Go to website
Last Update: February 19, 2019
License: MIT

Preview:

Modern Split View In JavaScript – Split.js

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:

Import the Split.js into the document.

<script src="./split.min.js"></script>

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>

Initialize the Spilt.js to generate a basic split view.

Split(['#one', '#two', '#three']);

Style the split view & slider handler.

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

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

You Might Be Interested In:


Leave a Reply