vue-split-view

SplitView

Create a resizable split-view to partition the UI.

👉 CodePen Demo

🚀 Install

npm i vue-split-view

🚦 Quick Setup

Bundler

Vue.js 3

import VueSplitView from 'vue-split-view'

Vue.js 2

import VueSplitView from 'vue-split-view/dist/vue2'

Browser

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

ESM

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

UMD

vue-split-view/dist/vue3.umd.js

👨🏻‍🏫 Examples

Horizontal split

<split-view>
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

Vertical split

<split-view direction="vertical">
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

Minimum width / height

<split-view
	direction="horizontal"
	a-init="100px"
	a-min="50px"
	a-max="200px"
>
	<template #A>
		Slot A
	</template>

	<template #B>
		Slot B
	</template>
</split-view>

Nesting split-views

<split-view direction="horizontal">
	<template #A>
		Slot A
	</template>

	<template #B>
		<split-view direction="vertical">
			<template #A>
				Slot BA
			</template>

			<template #B>
				Slot BB
			</template>
		</split-view>
	</template>
</split-view>

🎛 API

Props

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.

Slots

A

Content of the first partition.

B

Content of the second partition.