flex-splitter-directive

Dead simple panes splitter control based on flexbox.

Demo

* Declarative.
Just add an attribute to the DOM element. Don't need to write any JavaScript.
* Lightweight.
JS + CSS ~ 1.2kB (gzipped) with no dependencies.

Installation

$3

``sh
$ npm i flex-splitter-directive
`

`js
import "flex-splitter-directive"
import "flex-splitter-directive/styles.min.css"
`

$3

`html


`

$3

* index.js
* styles.min.css




Usage

1. Load CSS and JS.
2. Set data-flex-splitter-horizontal (or data-flex-splitter-vertical for vertical) attribute to the parent element of the panes.
* Optionally, specify the keyboard-movement option, as in data-flex-splitter-horizontal="keyboard-movement:10".
3. Insert

between each pane.
4. Set the following styles for each pane as required:
* width / height for the initial size.
* min-width / min-height for the minimum size.
* max-width / max-height for the maximum size.
* flex: auto` for filling space.

License

WTFPL

Other vanilla-js panes splitters

* Split (nathancahill/split)
* Splitter (andrienko/splitter)
* SplitMe (alesgenova/split-me)