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