custom-vue-resizer
A series of resizing components for Vue.js with minimum and maximum width and height control
Install with NPM
npm install custom-vue-resizer
Import
import {
DragCol,
DragRow,
ResizeCol,
ResizeRow,
Resize,
} from "custom-vue-resizer"
Usage
<DragCol>
<template #left>
<!-- your content -->
</template>
<template #right>
<!-- your content -->
</template>
</DragCol>
Props
props: {
// width percentage of the left part
// units: %
leftPercent: {
type: Number,
default: 50,
},
// width of the slider
// units: px
sliderWidth: {
type: Number,
default: 20,
},
// width of the container
// units: any
width: {
type: String,
default: "400px",
},
// min width of the container
// units: px
minWidth: {
type: Number,
default: 20,
},
// max width of the container
// units: px
maxWidth: {
type: Number,
default: -1,
},
// height of the container
// units: any
height: {
type: String,
default: "400px",
},
// color of the slider
sliderColor: {
type: String,
default: "#6f808d",
},
// bg color of the slider
sliderBgColor: {
type: String,
default: "#1f2e3a",
},
// color of the slider on hover
sliderHoverColor: {
type: String,
default: "#6f808d",
},
// bg color of the slider on hover
sliderBgHoverColor: {
type: String,
default: "#16222a",
}
}
Credits
The library custom-vue-resizer is a custom edition from vue-resizer to more informations Go to the base document