https://github.com/luncheon/flex-splitter-directive

Dead simple panes splitter control based on flexbox. JS + CSS < 1kB (gzipped) with no dependencies.
https://github.com/luncheon/flex-splitter-directive

split-layout split-pane splitter vanilla-js

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/luncheon/flex-splitter-directive
• Owner: luncheon
• License: wtfpl
• Created: 2019-10-15T12:23:40.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2022-09-18T09:28:33.000Z (over 2 years ago)
• Last Synced: 2024-12-12T17:48:55.227Z (10 days ago)
• Topics: split-layout, split-pane, splitter, vanilla-js
• Language: HTML
• Homepage: https://luncheon.github.io/flex-splitter-directive/
• Size: 254 KB
• Stars: 27
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# flex-splitter-directive

Dead simple panes splitter control based on flexbox.

[Demo](https://luncheon.github.io/flex-splitter-directive/)

* **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](https://www.npmjs.com/package/flex-splitter-directive) (with a module bundler)

```sh

$ npm i flex-splitter-directive

```

```js

import "flex-splitter-directive"

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

```

### CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/flex-splitter-directive))

```html

```

### Download Directly

* [index.js](https://cdn.jsdelivr.net/npm/[email protected]/index.js)

* [styles.min.css](https://cdn.jsdelivr.net/npm/[email protected]/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](http://www.wtfpl.net/)

## Other vanilla-js panes splitters

* [Split (nathancahill/split)](https://github.com/nathancahill/split)

* [Splitter (andrienko/splitter)](https://github.com/andrienko/splitter)

* [SplitMe (alesgenova/split-me)](https://github.com/alesgenova/split-me)