A directive for creating resizable containers.
All other resizable directive concepts I came across include layout logic in the directive. I wanted a directive that only handled the resize logic. This way, the layout logic is quarantined to the CSS.
npm install angular-resizable
orbower install angular-resizable
or clone/download this repo- Include
angular-resizable.min.js
in your project. - Include
angular-resizable.min.css
in your project as well (this provides default styling for the resize handles). - Then include the module in your app:
angular.module('app', ['angularResizable'])
- Use it:
<section resizable r-directions="['bottom', 'right']" r-flex="true">
Include any sides you want to be resizable in an array inside r-directions
. Accepts 'top','right','bottom', and 'left'. You can style the handles however you want. Just override the styles in the css in your own stylesheet.
Attributes | Default | Accepts | Description |
---|---|---|---|
rDirections | ['right'] | ['top', 'right', 'bottom', 'left',] | Determines which sides of the element are resizable. |
rFlex | false | boolean | Set as true if you are using flexbox. See this codepen. |
rCenteredX | false | boolean | If set as true, the velocity of horizontal resizing will be doubled. |
rCenteredY | false | boolean | If set as true, the velocity of vertical resizing will be doubled. |
rWidth | false | integer or $scope variable | If set, the resizable element will be rendered with a predefined width relative to this value in pixels and a watcher will be set on the 'rWidth' attribute. See this codepen. |
rHeight | false | integer or $scope variable | If set, the resizable element will be rendered with a predefined height relative to this value in pixels and a watcher will be set on the 'rHeight' attribute. See this codepen. |
rGrabber | <span></span> |
string | Defines custom inner html for the grabber. |
For an example using the events, see this codepen.
This event is emitted at the beginning of a resize with the following info object:
info.width
: The width of the directive at time of resize start. **Will be false if resizing verticallyinfo.height
: The height of the directive at time of resize start. **Will be false if resizing horizontallyinfo.id
: The id of the directive. **Will be false if there is no id set.info.evt
: original mouse event object
This event is emitted during the resizing of the element with the following object as an argument:
info.width
: The width of the directive at time of resize end. **Will be false if resizing verticallyinfo.height
: The height of the directive at time of resize end. **Will be false if resizing horizontallyinfo.id
: The id of the directive. **Will be false if there is no id set.info.evt
: original mouse event object
This event is emitted at the end of a resize with the following object as an argument:
info.width
: The width of the directive at time of resize end. **Will be false if resizing verticallyinfo.height
: The height of the directive at time of resize end. **Will be false if resizing horizontallyinfo.id
: The id of the directive. **Will be false if there is no id set.info.evt
: original mouse event object
- Add angular-resizable.resizing event (see pull request #7)
- Add attribute for providing custom inner html to the grabber element (see pull request #7)
MIT