vsp

vue-split-panel

VueJS wrapper for the great Split.js library.

Showing:

Popularity

Downloads/wk

1.5K

GitHub Stars

88

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

6.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Split Pane

Readme

Vue-Split-Panel

  • Fast: No overhead or attached window event listeners, uses pure CSS for resizing.
  • Compatible: Works great in IE9, and even loads in IE8 with polyfills. Early Firefox/Chrome/Safari/Opera supported too.

Installation

npm:

$ npm install --save vue-split-panel

Getting Started

// using ES6 modules
import VueSplit from 'vue-split-panel'
Vue.use(VueSplit)

Usage Examples

A split with two elements, starting at 25% and 75% wide.

<Split style="height: 500px;">
    <SplitArea :size="25">
        panel left
    </SplitArea>
    <SplitArea :size="75">
        panel right
    </SplitArea>
</Split>

A split with three elements, starting with even widths with 100px, 100px and 300px minimum widths, respectively.

<Split style="height: 500px;">
    <SplitArea :size="33" :minSize="100">
        panel left
    </SplitArea>
    <SplitArea :size="33" :minSize="100">
        panel center
    </SplitArea>
    <SplitArea :size="33" :minSize="300">
        panel right
    </SplitArea>
</Split>

A vertical split with two elements.

<Split style="height: 500px;" :direction="vertical">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>

A Setting the gutter size to 20px.

<Split style="height: 500px;" :gutterSize="20">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>

Callbacks that can be added on drag (fired continously), drag start and drag end. If doing more than basic operations in onDrag, add a debounce function to rate limit the callback.

<Split style="height: 500px;" @onDragEnd="onDragEnd" @onDragStart="onDragStart" onDrag="onDrag">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>
methods: {
    onDragStart (size) {
        console.log('Drag Start', size) // callback existing size
    },
    onDrag (size) {
        console.log('on Drag', size) // callback new size
    },
    onDragEnd (size) {
        console.log('Drag End', size) // callback new size
    }
}

A Reset the panel and get new sizes

<Split style="height: 500px;" ref="mySplit">
    <SplitArea>
        panel left
    </SplitArea>
    <SplitArea>
        panel center
    </SplitArea>
</Split>
methods: {
    Reset () {
        console.log(this.$refs.mySplit.reset())
    }
    getSizes () {
        console.log(this.$refs.mySplit.getSizes())
    }
}

API

Split props

PropertyTypeDefaultDescription
gutterSizeNumber10Gutter size in pixels.
directionString'horizontal'Direction to split: horizontal or vertical.

Split events

Event NameDescriptionReturn Value
onDragCallback on drag.current size
onDragStartCallback on drag start.new size
onDragEndCallback on drag end.new size

Split methods

Method NameDescriptionArguments
resetReset panel.none

SplitArea props

PropertyTypeDefaultDescription
sizesArrayInitial sizes of each element in percents or CSS values.
minSizeNumber or Array100Minimum size of each element.

Important Note

vue-split-panel does not set CSS beyond the minimum needed to manage the width or height of the elements.

Browser Support

This library uses Split.js. These features are supported in the following browsers:

Chrome logoFirefox logoInternet Explorer logoOpera logoSafari logoBrowserStack logo
22+ ✔6+ ✔9+ ✔15+ ✔6.2+ ✔Sponsored ✔

Built With

  • Webpack - The web framework used
  • gulp - Automated development toolkit

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100