https://github.com/venkatperi/vue-splitter-pane
vue-splitter-pane is a Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal).
https://github.com/venkatperi/vue-splitter-pane
Last synced: 5 months ago
JSON representation
vue-splitter-pane is a Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal).
- Host: GitHub
- URL: https://github.com/venkatperi/vue-splitter-pane
- Owner: venkatperi
- Created: 2018-11-03T04:22:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T16:49:56.000Z (almost 3 years ago)
- Last Synced: 2025-06-04T19:55:08.283Z (6 months ago)
- Language: Vue
- Homepage:
- Size: 2.11 MB
- Stars: 30
- Watchers: 2
- Forks: 5
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-splitter-pane - vue-splitter-pane is a Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal). ` 📝 3 years ago ` (UI Layout [🔝](#readme))
- awesome-vue - vue-magic-grid ★3 - A Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal). (UI Layout / Tour)
- awesome-vue - vue-splitter-pane - A Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal). (UI Layout / Tour)
- awesome-vue - vue-splitter-pane - A Vuejs component which renders two slots in a adjustable split arrangement (vertical or horizontal). (Components & Libraries / UI Layout)
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
content...
content...
```
#### Using `vue-splitter-h`
```html
content...
content...
```
#### Nested
```html
A
B
C
D
E
```
### 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`