flex-splitter-directive

Introduction

flex-splitter-directive is a flexbox-based panes splitter control.

• Declarative.
  You don't need to write any JavaScript. Just add an attribute to the DOM element.
• 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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1/styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/flex-splitter-directive@0.5.1"></script>

Usage

1. Load CSS and JS.
2. Set data-flex-splitter-horizontal / data-flex-splitter-vertical attribute to the parent element of the panes.
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