split-view
v1.0.1
Published
A drop-in framework to make resizable split views
Downloads
1,530
Readme
split-view
A drop-in framework to make resizable split views.
Install
npm install split-view
Usage
CSS
@import 'split-view'
JavaScript
import 'split-view'
HTML
View container:
<split-view horizontal|verticle></split-view>
Divider
<split-divider wide|thin/>
Add fill
attribute to a view to make it stretched. Normally, you have views that have fixed width/height, the one with fill
attribute will fill the rest of the container.
Customize divider
split-divider[thin],
split-divider[wide] {
background-color: #333;
}
split-view[vertical] > split-divider[wide] {
width: 20px;
}
split-view[horizontal] > split-divider[wide] {
height: 20px;
}
Sample
<split-view horizontal>
<header>Codepen</header>
<split-view vertical fill>
<section class="editor html"></section>
<split-divider wide></split-divider>
<section class="editor css"></section>
<split-divider wide></split-divider>
<section class="editor js" fill></section>
</split-view>
<split-divider wide></split-divider>
<section class="preview"></section>
<footer></footer>
</split-view>
See samples
folder for more.