Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nikitasnv/vue-resizable
VueResizable component
https://github.com/nikitasnv/vue-resizable
drag draggable resizable resize ui vue vue-component
Last synced: about 2 months ago
JSON representation
VueResizable component
- Host: GitHub
- URL: https://github.com/nikitasnv/vue-resizable
- Owner: nikitasnv
- License: mit
- Created: 2018-11-12T09:05:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-06T19:40:41.000Z (about 2 years ago)
- Last Synced: 2024-03-24T11:57:23.532Z (6 months ago)
- Topics: drag, draggable, resizable, resize, ui, vue, vue-component
- Language: Vue
- Homepage: https://nikitasnv.github.io/vue-resizable/
- Size: 807 KB
- Stars: 215
- Watchers: 4
- Forks: 45
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueResizable
[](https://npmjs.com/package/vue-resizable)
[](https://www.npmjs.com/package/vue-resizable)
[](LICENSE.md)
> Vue component that allows you to resize and drag elements
### Demo
Demo page\
CodeSandbox\
Material window
## Installation
```sh
npm install vue-resizable --save
```
## Basic usage
```vue
import VueResizable from 'vue-resizable'
export default {
name: "YourApp",
components: {VueResizable}
}
.resizable-content {
height: 100%;
width: 100%;
background-color: aqua;
}
```
## Properties
| Property | Data attribute | Type | Default | Description |
|:--------------------|------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| width | w | [Number, String] | undefined | Width in pixel or 'auto'
| minWidth | minW | Number | 0 | Minimum width
| maxWidth | maxW | Number | undefined | Maximum width
| height | h | [Number, String] | undefined | Height in pixel, or 'auto' |
| minHeight | minH | Number | 0 | Minimum height |
| maxHeight | maxH | Number | undefined | Maximum height |
| left | l | [Number, String] | 0 | Offset left from parent |
| top | t | [Number, String] | 0 | Offset top from parent
| active | | Array | ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'] | Active handlers for resize
| fitParent | | Boolean | false | Respect parent's size on resizing
| dragSelector | dragElements | String | undefined | Drag selector
| maximize | | Boolean | false| Maximize element to parent size
| disableAttributes | calcMap | Array | [] | Disable changes to attributes, Available values: ['l', 't', 'w', 'h']
## Events
| Name | Payload | Description |
|:--------------------|-------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| mount | [eventName,left,top,width,height] | Called after the component is mounted
| destroy | [eventName,left,top,width,height] | Called before the component is destroyed
| resize:start | [eventName,left,top,width,height] | Called after clicking on one of the active handlers
| resize:move | [eventName,left,top,width,height] | Called when a handler is being dragged
| resize:end | [eventName,left,top,width,height] | Called when the mouse button was released after resize
| drag:start | [eventName,left,top,width,height] | Called after clicking on one of the drag elements
| drag:move | [eventName,left,top,width,height] | Called when a drag element is being dragged
| drag:end | [eventName,left,top,width,height] | Called when the mouse button was released after drag
| maximize | [eventName,left,top,width,height, state] | Called when "maximize" state changed
## Development
To begin development, run:
``` bash
npm install
npm run dev
```
It starts [webpack-dev-server](https://github.com/webpack/webpack-dev-server) on `localhost:8080` with [Demo](./docs) page.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.