Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wutility/split-views

✂ Simple and lightweight utility for resizable split views. <1kb with 0 dependencies ➗
https://github.com/wutility/split-views

flex-box hacktoberfest resize resize-pane resizer split-view split-views

Last synced: 5 days ago
JSON representation

✂ Simple and lightweight utility for resizable split views. <1kb with 0 dependencies ➗

Awesome Lists containing this project

README

        

# ✂ SplitViews
**Utility for resizable split views.**

- Fast & Simple to use.
- Lightweight <1kb.
- Zero dependencies.
- No events listeners are attached to Window.
- Compatible: Firefox - Chrome - Safari - Opera - Android - (FlexBox is not supported in IE).


split-views
split-views
split-views
split-views
split-views

![Split views](https://i.ibb.co/0h4gVd5/split-views.gif)


### [Demo](https://wutility.github.io/split-views)

```bash
$ npm i split-views
# or
$ yarn add split-views
```

## Usage
```js
import SplitViews from 'split-views';
```

Or include it via jsDelivr CDN (UMD):
```html

```

## Documentation

- **SplitViews(options: Object): Object**

| Options | Type | Default | Description |
| ------------ | ----------------------------- | -------------- | ------------------------------------------- |
| `parent` | `HTMLElement` or `String` | `'.split-view'` | Parent element. |
| `sizes` | `Array` | `[]` | Initial sizes of each element in %. |
| `minSize` | `Number` | `0` | Minimum size. |
| `gutterSize` | `Number` | `5` | Gutter size (seperator). |
| `direction` | `String` | `'horizontal'` | Resize direction: horizontal or vertical. |
| `onDragEnd` | `Method` | `null` | Callback with new sizes in %. |

## Methods & Examples
```js
const options = {
parent: '#parent-id', // or HTMLElement
direction: 'horizontal',
gutterSize: 5,
minSize: 20,
sizes: [25, 50, 25],
onDragEnd: (newSizes) => {
console.log(newSizes);
}
};

const sp = SplitViews(options)

// detroy method: remove "touchstart" and "mousedown" events
// the others events are removed by default
sp.detroy()
```

# Related
- [React](https://github.com/haikelfazzani/react-split-views): React component wrapper

## Notes
- Tested on Chrome 67, Firefox 67, Edge 70, Opera 67, Safari 11, Android (>= 4).
- SplitViews is flex-based.
- All pull requests are welcome, feel free.

## Author
- [Haikel Fazzani](https://github.com/haikelfazzani)

## License
MIT