# svelte-split-pane

> Split Pane Splitter Both for Horizontal and Vertial written in Svelte

Latest version **0.1.2** (published 2021-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-split-pane
pnpm add svelte-split-pane
yarn add svelte-split-pane
bun add svelte-split-pane
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-02-07 |
| First published | 2021-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 247.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 44 |
| Author | Readiz |
| Maintainers | readiz |
| Keywords | svelte, split, pane |

## Links

- npm: https://www.npmjs.com/package/svelte-split-pane
- Repository: https://github.com/Readiz/svelte-split-pane
- Homepage: https://readiz.com/
- Issues: https://github.com/Readiz/svelte-split-pane/issues
- npm.io page: https://npm.io/package/svelte-split-pane

## Recent versions

- 0.1.2 (latest) — 2021-02-07
- 0.1.1 — 2021-02-07
- 0.1.0 — 2021-02-07

## README

# Split Pane for Svelte

This is a splitter plugin for Svelte Application.

Easy to use to separate panes horizontally / vertically.

![](2021-02-07-23-58-06.png)

## Example

- GitHub Pages Example: http://www.readiz.com/svelte-split-pane/
- Svelte REPL Example: https://svelte.dev/repl/5ab84358dd8b46ad9474884f2359ff9b?version=3

## Usage

Just use slots to place contents.
```html
<script>
    import { HSplitPane, VSplitPane } from 'svelte-split-pane';
</script>
<h1>H Splite Pane Default</h1>
<div class="wrapper">
<HSplitPane updateCallback={() => {
    console.log('HSplitPane Updated!');
}}>
    <left slot="left">
        Left Pane
    </left>
    <right slot="right">
        Right Pane
    </right>
</HSplitPane>
</div>
<h1>V Splite Pane Default</h1>
<div class="wrapper">
<VSplitPane updateCallback={() => {
    console.log('VSplitPane Updated!');
}}>
    <top slot="top">
        Top Pane
    </top>
    <down slot="down">
        Down Pane
    </down>
</VSplitPane>
</div>
```

## Optional Parameters

- updateCallback: this is called when splitting is finished.
- [left|right|top|down]PaneSize: Specify the Pane size. (Default: 50%)
- min[left|right|top|down]PaneSize: Specify minimum value of the each Pane.

## License

- MIT
- PR & Suggestions are welcome!

---
_Source: https://npm.io/package/svelte-split-pane · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._