Create a resizable split-view to partition the UI
npm install vue-split-viewCreate a resizable split-view to partition the UI.
š CodePen Demo
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
Slot A
Slot B
`$3
`html
Slot A
Slot B
`$3
`html
direction="horizontal"
a-init="100px"
a-min="50px"
a-max="200px"
>
Slot A
Slot B
`$3
`html
Slot A
Slot BA
Slot BB
`š API
$3
#### direction
Type:
StringDefault:
horizontalThe direction the split-view should be partitioned in. Possible values are:
horizontal, vertical.#### a-init
Type:
StringDefault:
noneThe 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:
StringDefault:
noneThe 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:
StringDefault:
noneThe 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.#### A
Content of the first partition.
#### B
Content of the second partition.