vue-resize-split-pane - npm Package Compare versions

vue-resize-split-pane

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.3 to 0.0.4

package.json

		{
		"name": "vue-resize-split-pane",
		"version": "0.0.3",
		"version": "0.0.4",
		"description": "Splittable and resizable panes for Vue.js",
		@@ -74,3 +74,7 @@ "author": "Raven78",
		},
		"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
		"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
		]
		}

111

README.md

		# vue-resize-split-pane

		> Resizable split pane using Vue.js
		Splittable and resizable panes for Vue.js

		WIP + RAT

		More details coming soon.
		## Install

		With yarn:
		```
		yarn add vue-resize-split-pane
		```

		With npm:

		```
		npm i vue-resize-split-pane --save
		```

		## Use

		Global import

		```js
		//main.js
		import Vue from 'vue'
		import ResSplitPane from 'vue-resize-split-pane'

		Vue.use(ResSplitPane)
		```

		Local import

		```html
		<template>
		<div id="app">
		<rs-panes split-to="columns" :allow-resize="true">
		<div slot="firstPane">
		FIRST
		</div>
		<div slot="secondPane">
		SECOND
		</div>
		</rs-panes>
		<!-- <router-view></router-view> -->
		</div>
		</template>

		<script>
		//App.vue or YourComponent.vue
		import ResSplitPane from 'vue-resize-split-pane'

		export default {
		name: 'app',
		components: {
		'rs-panes': ResSplitPane,
		},
		...
		</script>
		```

		Or you can nest them

		```html
		<template>
		<div id="app">
		<rs-panes split-to="columns" :allow-resize="true">
		<div slot="firstPane">
		LEFT
		</div>
		<rs-panes :allowResize="true" split-to="rows"
		slot="secondPane" primary="second">
		<rs-panes :allowResize="true" split-to="columns"
		slot="firstPane" primary="second">
		<div slot="firstPane">
		CENTER
		</div>
		<div slot="secondPane">
		RIGHT
		</div>
		</rs-panes>
		<div slot="secondPane">
		BOTTOM
		</div>
		</rs-panes>
		</rs-panes>
		</div>
		</template>
		```

		## Slots

		`firstPane` for left column or top row

		`secondPane` for right column or bottom row

		## Props

		```javascript
		props: {
		'allow-resize': { type: Boolean, default: false },
		'split-to': { type: String, default: 'columns' }, // columns \| rows
		'primary': { type: String, default: 'first' }, // first \| second
		'size': { type: Number, default: 100 }, // in pixels
		'min-size': { type: Number, default: 16 }, // in pixels
		'max-size': { type: Number, default: 0 }, // in pixels
		'step': { type: Number, default: 0 }, // in pixels
		},
		```

		The `primary` prop is used to specify which of the two panes has its size fixed.

		The `size` prop is either width or height depending on how the panes are split.


		## License

		MIT © Valentin Bucur <valentin.bucur@gmail.com>

src/ResizeSplitPane.vue

Sorry, the diff of this file is not supported yet

Improved metrics