1.3.0 • Published 2 years ago

noruka-vue-resizer v1.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

vue-resizer

A series of the resizer components for Vue.js

Original Work by Justcaliturner

For all the usages please check the website

Install with NPM

npm install noruka-vue-resizer

Import

import {
  DragCol,
  DragRow,
  ResizeCol,
  ResizeRow,
  Resize,
} from "noruka-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",
  },
  // 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",
  },
  // Prop for zIndex for the slider
  sliderZIndex: {
    type: Number,
    default: 100,
  },
  // Max Values for Width and Height (ResizeCol and ResizeRow)
  maxWidth: {
    type: Number
  },
  // Min Values for Width and Height (ResizeCol and ResizeRow)
  minWidth: {
    type: Number
  }
}

Go to the document

1.2.6

2 years ago

1.2.5

2 years ago

1.3.0

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago