https://github.com/privatenumber/vue-split-view

Create a resizable split-view to partition the UI
https://github.com/privatenumber/vue-split-view

component partition resizable split ui view vue

Last synced: 3 months ago
JSON representation

Create a resizable split-view to partition the UI

• Host: GitHub
• URL: https://github.com/privatenumber/vue-split-view
• Owner: privatenumber
• License: mit
• Created: 2018-10-15T14:47:56.000Z (over 6 years ago)
• Default Branch: develop
• Last Pushed: 2020-12-30T04:05:33.000Z (about 4 years ago)
• Last Synced: 2024-10-19T01:10:56.681Z (4 months ago)
• Topics: component, partition, resizable, split, ui, view, vue
• Language: Vue
• Homepage:
• Size: 527 KB
• Stars: 20
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SplitView [![Latest version](https://badgen.net/npm/v/vue-split-view)](https://npm.im/vue-split-view) [![Monthly downloads](https://badgen.net/npm/dm/vue-split-view)](https://npm.im/vue-split-view) [![Install size](https://packagephobia.now.sh/badge?p=vue-split-view)](https://packagephobia.now.sh/result?p=vue-split-view) [![Bundle size](https://badgen.net/bundlephobia/minzip/vue-split-view)](https://bundlephobia.com/result?p=vue-split-view)

Create a resizable split-view to partition the UI.

👉 [CodePen Demo](https://codepen.io/privatenumber/pen/xxEYxgB)

## 🚀 Install

```sh

npm i vue-split-view

```

## 🚦 Quick Setup

### Bundler

#### Vue.js 3

```js

import VueSplitView from 'vue-split-view'

```

#### Vue.js 2

```js

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

```

### Browser

- 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

### Horizontal split

```html

	

		Slot A

	

	

		Slot B

	

```

### Vertical split

```html

	

		Slot A

	

	

		Slot B

	

```

### Minimum width / height

```html

	

		Slot A

	

	

		Slot B

	

```

### Nesting split-views

```html

	

		Slot A

	

	

		

			

				Slot BA

			

			

				Slot BB

			

		

	

```

## 🎛 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.