Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 ➗
- Host: GitHub
- URL: https://github.com/wutility/split-views
- Owner: wutility
- License: mit
- Created: 2019-08-21T00:33:41.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-16T07:28:11.000Z (over 2 years ago)
- Last Synced: 2024-08-10T06:11:09.133Z (3 months ago)
- Topics: flex-box, hacktoberfest, resize, resize-pane, resizer, split-view, split-views
- Language: TypeScript
- Homepage: https://codesandbox.io/s/split-views-mli19
- Size: 175 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE.md
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](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