Skip to content

Dead simple panes splitter control based on flexbox. JS + CSS < 1kB (gzipped) with no dependencies.

License

Notifications You must be signed in to change notification settings

luncheon/flex-splitter-directive

Repository files navigation

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

npm (with a module bundler)

$ npm i flex-splitter-directive
import "flex-splitter-directive"
import "flex-splitter-directive/styles.min.css"

CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Download Directly

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 <div role="separator" tabindex="1"></div> 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