SplitView    

Create a resizable split-view to partition the UI.

👉 CodePen Demo

🚀 Install

``sh
npm i vue-split-view
`

🚦 Quick Setup

$3

#### Vue.js 3
`js
import VueSplitView from 'vue-split-view'
`

#### Vue.js 2
`js
import VueSplitView from 'vue-split-view/dist/vue2'
`

$3


- Load the CSS stylesheet: vue-split-view/dist/style.css

#### ESM
`js
import VueSplitView from 'vue-split-view/dist/vue3.esm.js'
`

#### UMD
`
vue-split-view/dist/vue3.umd.js
`

👨🏻‍🏫 Examples

$3


`html



`

$3


`html



`

$3


`html
direction="horizontal"
a-init="100px"
a-min="50px"
a-max="200px"
>



`

$3


`html



`

🎛 API




$3

#### direction

Type: String

Default: horizontal

The direction the split-view should be partitioned in. Possible values are: horizontal, vertical.

#### a-init

Type: String

Default: none

The initial width/height of the first partition. The second partition fills the remaining width/height. Numeric values translate to pixels, string values are directly used for the width/height CSS property.

#### a-min
Type: String

Default: none

The minimum width/height of the first partition. This influences the second partition's maximum width/height. The value is directly used for the min-width/min-height CSS property.

#### a-max
Type: String

Default: none

The maxium width/height of the first partition. This influences the second partition's minimum width/height. The value is directly used for the max-width/max-height` CSS property.

$3

#### A
Content of the first partition.

#### B
Content of the second partition.