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.