# vue-splitter-pane

> Vue Splitter Pane Component

Latest version **1.3.13** (published 2018-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-splitter-pane
pnpm add vue-splitter-pane
yarn add vue-splitter-pane
bun add vue-splitter-pane
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.13 |
| Published | 2018-11-13 |
| First published | 2018-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Venkat Peri |
| Maintainers | venkatperi |

## Links

- npm: https://www.npmjs.com/package/vue-splitter-pane
- npm.io page: https://npm.io/package/vue-splitter-pane

## Recent versions

- 1.3.13 (latest) — 2018-11-13
- 1.3.12 — 2018-11-13
- 1.3.11 — 2018-11-13
- 1.3.9 — 2018-11-10
- 1.3.8 — 2018-11-10
- 1.3.6 — 2018-11-08
- 1.3.4 — 2018-11-07
- 1.3.3 — 2018-11-06
- 1.3.2 — 2018-11-06
- 1.3.1 — 2018-11-06
- 1.3.0 — 2018-11-06
- 1.2.1 — 2018-11-05
- 1.2.0 — 2018-11-05
- 1.1.2 — 2018-11-05
- 1.1.1 — 2018-11-04
- … 2 more at https://npm.io/package/vue-splitter-pane/versions

## README

# Vue Splitter Pane

[Demo](https://venkatperi.github.io/vue-splitter-pane/demo)

`vue-splitter-pane` is a Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal).

Uses `flex-box` for sizing.

### Installation & Usage
```bash
$ npm install vue-splitter-pane
```

#### Vue Global Usage
```javascript
import VueSplitter from 'vue-splitter-pane'
Vue.use(VueSplitter); # registers vue-splitter, vue-splitter-v and vue-splitter-h

```

#### Vue Local Usage
```javascript
import VueSplitter, {VueSplitterH, VueSplitterV} from 'vue-splitter-pane'
Vue.extend({
  ...,
  components:  {
    VueSplitter,       // registers vue-splitter, must provide orientation
    VueSplitterV,      // registers vue-splitrer-v, for side by side arrangement
    VueSplitterH       // registers vue-splitter-h for top/bottom arrangement
  }
})
```

### Examples

#### Using `vue-splitter`
```html
<vue-splitter split="vertical">
  <template slot="left">
    content...
  </template>
  <template slot="right">
    content...
  </template>
</vue-splitter>
```

#### Using `vue-splitter-h`
```html
<vue-splitter-h>
   <template slot="top">
    content...
   </template>
   <template slot="bottom">
    content...
   </template>
 </vue-splitter>
```

#### Nested
```html
<vue-splitter-v initial-size="40%">
  <template slot="left"> A </template>
  <template slot="right">
    <vue-splitter-h>
      <template slot="top">
        <vue-splitter-v initial-size="60%">
          <template slot="left">B</template>
          <template slot="right">C</template>
        </vue-splitter-v>
      </template>
      <template slot="bottom">
        <vue-splitter-v :throttle="20" initial-size="200px">
          <template slot="left">D</template>
          <template slot="right">E</template>
        </vue-splitter-v>
      </template>
    </vue-splitter-h>
  </template>
</vue-splitter-v>
```

### Slot Names
|    Splitter Type    |    First Slot   |   Second Slot   |
| -----------------  | ---------------- | :--------: |
| vertical       | `left` |  `right` |
| horizontal       | `top` |  `bottom` |

### Events
* `resize([size1, size2])`: Emitted when the panes are resized. `size1` and `size2` are the adjusted dimensions of the first and second pane, respectively (width for `vertical` and height for `horizontal`).


### Component Properties
|    Property    |    Description   |   type   |	default	|
| -----------------  | ---------------- | :--------: | :----------: |
| split       | Pane arrangement |`horizontal` , `vertical` | required |
| initial-size | Initial size of first slot | Any valid CSS size (e.g. px, %)| 50% |
| min-size | Lower size bound for the first slot  | Any valid CSS size (e.g. px, % )| 20% |
| min-size | Upper size bound for the first slot  | Any valid CSS size (e.g. px, %)| 80% |
| throttle | Throttle size updates to no more than given value | Rate in ms | - |
| x-class | Adds a classname | string | - |


### Styling
`vue-splitter-pane` includes the bare minimal styling to ensure functionality.

#### Container
* `.VueSplitter-Container-item`: the container
* `.VueSplitter-Container-[horizontal|vertical]`: specialization for split type
* value set via `x-class`

#### Panes
* `.VueSplitter-Pane-item`: the pane
* `.VueSplitter-Pane-[left|right|top|bottom]`: specialization by position
* value set via `x-class`

#### Handle
* `.VueSplitter-Handle-item`: the handle
* `.VueSplitter-Handle-[horizontal|vertical]`: specialization by split type
* value set via `x-class`

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