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.