AlkantarClanX12
Your IP : 3.144.46.90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="< 2kb unopinionated utility for resizeable split views">
<title>Split.js</title>
<link rel="stylesheet" type="text/css" href="./gist.css">
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="./splitjs.css">
<link rel="stylesheet" type="text/css" href="./font.css">
<style>
.gist-file {
margin-bottom: 2em !important;
}
.gist .gist-data {
border-bottom: 0 !important;
}
.gist-meta {
display: none;
}
.gist-data tr:last-child .blob-num {
border: none;
}
#logo-1, #logo-2,
#js-1, #css-1, #html-1,
#js-2, #css-2, #html-2 {
float: left;
}
#logo-1, #logo-2 {
height: 178px;
}
.gutter.logo-gutter {
background-color: #34495E;
margin-top: 0;
}
.gutter {
float: left;
background-color: #eee;
margin-top: 27px;
cursor: ew-resize;
}
.split-parent:after {
content: "";
display: table;
clear: both;
}
.clearfix::before {
display: table;
content: ""; }
.clearfix::after {
display: table;
clear: both;
content: ""; }
</style>
</head>
<body>
<div><header role="banner" class="jumbotron"><div class="container" style="position:relative">
<div class="split-parent">
<div id="logo-1">
<div style="max-width:490px;height:100%;position:relative;overflow:hidden;">
<div style="overflow:hidden;width:208px;position:absolute;right:0;height:100%">
<img alt="Split.js" title="Split.js" src="./logo.svg" style="width:430px;max-width:430px;position:absolute;right:-223px;top:0;bottom:0">
</div>
</div>
</div>
<div id="logo-2" style="position:relative">
<div style="max-width:490px;height:100%;position:absolute;right:0;width:100%;overflow:hidden;">
<div style="overflow:hidden;width:208px;position:absolute;left:0;height:100%">
<img title="Split.js" src="./logo.svg" style="width:430px;max-width:430px;position:absolute;left:-222px;top:0;bottom:0">
</div>
</div>
</div>
</div>
<div style="margin-top:20px;text-align:center;" class="ui-font"><a class="btn btn-large" href="#get-started" style="margin-right:8px;">Get Started</a><div class="clearfix" style="display:inline-block;vertical-align:middle;"><a class="btn btn-large btn-with-count" role="button" href="https://github.com/nathancahill/split/"><svg class="octicon" version="1.1" viewBox="0 0 14 16" ariahidden="true" width="20" height="20" children=""><path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg> Star</a><a class="social-count" style="display:inline-block;vertical-align:middle;">3,253</a></div></div></div></header>
<main class="container">
Split.js is a <b>2kb unopinionated utility</b> for resizeable split views (also called panes or frames). It <b>handles weird edge cases</b> so you don't have to. Split.js is <b style="white-space: nowrap">CSS-driven</b>,
only using JS to recalculate CSS styles on drag. Split.js <b>does not attach any window event listeners</b>, instead relying on CSS for the layout when the window size changes. This keeps the JS overhead extremely low.
<a name="get-started"></a>
<h2>Get Started</h2>
Create a split view with an array of selectors or HTML elements. By default, Split.js modifies <b>the CSS width property and nothing else</b>. You are responsible for adding other CSS properties to create a layout. A simple way to place elements side-by-side is with a <code>float</code> rule. Other layout options besides <code>width-float</code> are possible (and encouraged), see the <a href="#advanced">Advanced</a> section below.
<br /><br />
<div class="split-parent">
<div id="js-1">
<h6 style="margin:0">JS</h6>
<div class="gist">
<div class="gist-file" style="height:139px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-en">Split</span>([<span class="pl-s"><span class="pl-pds">'</span>#one<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>#two<span class="pl-pds">'</span></span>]);</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="html-1">
<h6 style="margin:0">HTML</h6>
<div class="gist">
<div class="gist-file" style="height:139px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-html">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><<span class="pl-ent">div</span>></td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line"> <<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>split<span class="pl-pds">"</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>one<span class="pl-pds">"</span></span>></<span class="pl-ent">div</span>></td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line"> <<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>split<span class="pl-pds">"</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>two<span class="pl-pds">"</span></span>></<span class="pl-ent">div</span>></td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line"></<span class="pl-ent">div</span>></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="css-1">
<h6 style="margin:0">CSS</h6>
<div class="gist">
<div class="gist-file" style="height:139px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-css">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.split</span>, <span class="pl-e">.gutter.gutter-horizontal</span> {</td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-c1"><span class="pl-c1">float</span></span>: <span class="pl-c1">left</span>;</td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.gutter.gutter-horizontal</span> {</td>
</tr>
<tr>
<td class="blob-num" data-line-number="5"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-c1"><span class="pl-c1">cursor</span></span>: <span class="pl-c1">ew-resize</span>;</td>
</tr>
<tr>
<td class="blob-num" data-line-number="6"></td>
<td class="blob-code blob-code-inner js-file-line">}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="advanced"></a>
<h2>Advanced</h2>
By overriding the default <code>elementStyle</code> and <code>gutterStyle</code> hooks, it's easy to change the CSS rules that Split.js modifies to support <code>flex</code>, <code>grid</code> and other CSS layouts:
<br /><br />
<div class="split-parent" style="display:flex">
<div id="js-2">
<h6 style="margin:0">JS</h6>
<div class="gist">
<div class="gist-file" style="height:185px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-javascript">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-en">Split</span>([<span class="pl-s"><span class="pl-pds">'</span>#one<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>#two<span class="pl-pds">'</span></span>], {</td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-en">elementStyle</span><span class="pl-k">:</span> (<span class="pl-smi">dimension</span>, <span class="pl-smi">size</span>, <span class="pl-smi">gutterSize</span>) <span class="pl-k">=></span> ({</td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-s"><span class="pl-pds">'</span>flex-basis<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">`</span>calc(<span class="pl-s1"><span class="pl-pse">${</span>size<span class="pl-pse">}</span></span>% - <span class="pl-s1"><span class="pl-pse">${</span>gutterSize<span class="pl-pse">}</span></span>px)<span class="pl-pds">`</span></span>,</td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line"> }),</td>
</tr>
<tr>
<td class="blob-num" data-line-number="5"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-en">gutterStyle</span><span class="pl-k">:</span> (<span class="pl-smi">dimension</span>, <span class="pl-smi">gutterSize</span>) <span class="pl-k">=></span> ({</td>
</tr>
<tr>
<td class="blob-num" data-line-number="6"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-s"><span class="pl-pds">'</span>flex-basis<span class="pl-pds">'</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">`</span><span class="pl-s1"><span class="pl-pse">${</span>gutterSize<span class="pl-pse">}</span></span>px<span class="pl-pds">`</span></span>,</td>
</tr>
<tr>
<td class="blob-num" data-line-number="7"></td>
<td class="blob-code blob-code-inner js-file-line"> }),</td>
</tr>
<tr>
<td class="blob-num" data-line-number="8"></td>
<td class="blob-code blob-code-inner js-file-line">})</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="html-2">
<h6 style="margin:0">HTML</h6>
<div class="gist">
<div class="gist-file" style="height:185px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-css">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><<span class="pl-ent">div</span> class="flex"<span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line"> <<span class="pl-ent">div</span> id="one"<span class="pl-k">></span></<span class="pl-ent">div</span><span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line"> <<span class="pl-ent">div</span> id="two"<span class="pl-k">></span></<span class="pl-ent">div</span><span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line"></<span class="pl-ent">div</span><span class="pl-k">></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="css-2">
<h6 style="margin:0">CSS</h6>
<div class="gist">
<div class="gist-file" style="height:185px;">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-css">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.flex</span> {</td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-c1"><span class="pl-c1">display</span></span>: <span class="pl-c1">flex</span>;</td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-c1"><span class="pl-c1">flex-direction</span></span>: <span class="pl-c1">row</span>;</td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line">}</td>
</tr>
<tr>
<td class="blob-num" data-line-number="5"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.gutter.gutter-horizontal</span> {</td>
</tr>
<tr>
<td class="blob-num" data-line-number="6"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-c1"><span class="pl-c1">cursor</span></span>: <span class="pl-c1">ew-resize</span>;</td>
</tr>
<tr>
<td class="blob-num" data-line-number="7"></td>
<td class="blob-code blob-code-inner js-file-line">}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>React</h2>
Split.js is also available as a React component: <a href="https://github.com/nathancahill/split/tree/master/packages/react-split">react-split</a>. The component
accepts the same options as the Split.js constructor:
<br /><br />
<h6 style="margin:0">JS</h6>
<div class="gist">
<div class="gist-file">
<div class="gist-data">
<div itemprop="text" class="blob-wrapper data type-javascript ">
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
<tbody><tr>
<td class="blob-num" data-line-number="1"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-smi">Split</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-split<span class="pl-pds">'</span></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="2"></td>
<td class="blob-code blob-code-inner js-file-line">
</td>
</tr>
<tr>
<td class="blob-num" data-line-number="3"></td>
<td class="blob-code blob-code-inner js-file-line"><span class="pl-smi">ReactDOM</span>.<span class="pl-en">render</span>(</td>
</tr>
<tr>
<td class="blob-num" data-line-number="4"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-k"><</span>Split sizes<span class="pl-k">=</span>{[<span class="pl-c1">25</span>, <span class="pl-c1">75</span>]}<span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="5"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-k"><</span>Component <span class="pl-k">/</span><span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="6"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-k"><</span>Component <span class="pl-k">/</span><span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="7"></td>
<td class="blob-code blob-code-inner js-file-line"> <span class="pl-k"><</span><span class="pl-k">/</span>Split<span class="pl-k">></span></td>
</tr>
<tr>
<td class="blob-num" data-line-number="8"></td>
<td class="blob-code blob-code-inner js-file-line">)</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
<br /><br />
<h2>Docs & API</h2>
Docs are available in <a href="http://github.com/nathancahill/split/">README.md on GitHub</a>.
<br /><br />
</main>
<div class="container" style="margin: 30px auto">© 2018 <a href="http://nathancahill.com/">Nathan Cahill</a>. <a href="https://github.com/nathancahill/split/tree/master/splitjs#license">MIT license</a>.</div>
<script async defer type="text/javascript" src="./web-font.js"></script>
<script type="text/javascript" src="./split.min.js"></script>
<script>
Split(['#logo-1', '#logo-2'], {
minSize: 0,
gutter: function (index, direction) {
var gutter = document.createElement('div')
gutter.className = 'gutter gutter-' + direction + ' logo-gutter'
gutter.style.height = '144px'
return gutter
},
gutterSize: 12,
})
Split(['#js-1', '#html-1', '#css-1'], {
gutter: function (index, direction) {
var gutter = document.createElement('div')
gutter.className = 'gutter gutter-' + direction
gutter.style.height = '139px'
return gutter
},
gutterSize: 2,
})
Split(['#js-2', '#html-2', '#css-2'], {
sizes: [50, 25, 25],
gutter: function (index, direction) {
var gutter = document.createElement('div')
gutter.className = 'gutter gutter-' + direction
gutter.style.height = '185px'
return gutter
},
gutterSize: 2,
elementStyle: function (dimension, size, gutterSize) {
return {
'width': 'calc(' + size + '% - ' + gutterSize + 'px)',
}
},
gutterStyle: function (dimension, gutterSize) {
return {
'width': gutterSize + 'px',
}
}
})
const x = new XMLHttpRequest()
x.open('GET', 'https://api.github.com/repos/nathancahill/split')
x.onload = () => {
var stars = JSON.parse(x.responseText).stargazers_count
document.querySelector('.social-count').textContent = stars.toLocaleString()
}
x.send()
</script>
</body>
</html>