3.0.1 • Published 1 year ago
ember-resizable v3.0.1
ember-resizable
Resizable component for Ember. (Demo)
This is largely inspired by/based on re-resizable.
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Installation
ember install ember-resizable
Usage
Include the following in your app.scss:
@import 'ember-resizable';
Basic usage:
<ReSizable @width="300" @height="200">
Your Content
</ReSizable>
This will make <ReSizable>
adjust its size according to user input. If you want to manually control its size, bind to onResize
while not setting width
and height
. Manually setting width
, height
between resizes is of course also possible.
Properties
Property | default | Type | Notes |
---|---|---|---|
width | null | int or string | Initial size. If provided the component will adjust its size according to user input. If omitted or null it will not change its size. This is a one way binding nevertheless. |
height | null | int or string | Initial size. If provided the component will adjust its size according to user input. If omitted or null it will not change its size. This is a one way binding nevertheless. |
minWidth | 10 | int | Minimum width in pixels |
minHeight | 10 | int | Minimum height in pixels |
maxWidth | int | Maximum width in pixels | |
maxHeight | int | Maximum height in pixels | |
grid | [1, 1] | array: int | Used for snapping on x, y axis. If set to 200, 50 for example, width will snap to 0, 200, 400, 600, … while height will snap to 0, 50, 100, 150, … |
lockAspectRatio | false | bool | Maintain aspect ratio that is found during beginning of resize |
directions | ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'] | array: string | On which sides/corners to enable resizing |
Actions
Name | Params | Note |
---|---|---|
onResizeStart | direction , event , element | element is the <ReSizable> DOM element |
onResizeStop | direction , { width: deltaX, height: deltaY } , element | If you did not adjust the size of <ReSizable> by changing its dimension and if you did not provide width /height using for e.g. the values provided by onResize deltaX and deltaY will be 0 |
onResize | direction , { width: newWidth, height: newHeight } , { width: deltaX, height: deltaY } , element | . |
In addition it is possible to adjust the size of the resize handlers in your scss:
// 10px is the default size
$ember-resizable-resizer-size: 10px;
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.