UNPKG

resizable

Version:

Resizable behaviour for elements

51 lines (36 loc) 1.61 kB
# Resizable Resizable behaviour for elements. [Demo](https://dy.github.io/resizable). [![npm install resizable](https://nodei.co/npm/resizable.png?mini=true)](https://nodei.co/npm/resizable/) ```js import Resizable from 'resizable'; var resizable = new Resizable(document.querySelector('.my-element'), { within: 'parent', handles: 's, se, e', threshold: 10, draggable: false }); resizable.on('resize', function(){ //... }); ``` ## Options | Parameter | Default | Description | |---|:---:|---| | `handles` | * | List of handles to support. Valid handles: `s`, `se`, `e`, `ne`, `n`, `nw`, `w`, `sw`. May be specified as an object, array, or comma-separated string. | | `resize` | `undefined` | Resize event handler. | | `threshold` | `10` | A movement threshold required to start resize - whether array, number or function. | | `within` | `document` | Restrict movement within the container. Pass `'parent'` to take parent node. | | `draggable` | `false` | Make element [draggable](http://github.com/dfcreative/draggy) as well. Set an object to pass options to draggable. | | `css3` | `true` | Use `translate3d` for defining position. | \* Default handles are dependent on the styling of the given element. Inline elements will default to `s`, `se`, `e`, while elements that can support full resize will default to all handles being enabled. ## Events | Name | Description | |---|---| | `resizestart` | Element resize started. | | `resize` | Element resized. | | `resizeend` | Element resize ended. | ## License MIT <p align=center><a href="https://github.com/krishnized/license/">🕉</a></p>