resizable
Version:
Resizable behaviour for elements
51 lines (36 loc) • 1.61 kB
Markdown
# Resizable
Resizable behaviour for elements. [Demo](https://dy.github.io/resizable).
[](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>